Using the below code. My grid doesn't display summaries. If I take out the summaryOperands, the summaries are displayed. What is the issue?
$(function () { $('#TransactionSummary_Grid').igGrid({ dataSource: { "Records": [{ "fk_emp_id": 15, "fk_com_trans_type": "Increase Reserves", "Debit": 2613.20, "Credit": 0.00, "Net": 2613.20, "PropertiesDisplayValues": {} }, { "fk_emp_id": 15, "fk_com_trans_type": "Full Commission", "Debit": 5518.80, "Credit": 0.00, "Net": 5518.80, "PropertiesDisplayValues": {} }, { "fk_emp_id": 15, "fk_com_trans_type": "Decrease Reserves", "Debit": 0.00, "Credit": -2614.20, "Net": -2614.20, "PropertiesDisplayValues": {} }, { "fk_emp_id": 15, "fk_com_trans_type": "Bonus", "Debit": 75.00, "Credit": 0.00, "Net": 75.00, "PropertiesDisplayValues": {} }], "TotalRecordsCount": 0, "Metadata": { "timezoneOffset": -18000000, "Summaries": { "fk_com_trans_type": { "count": 4 }, "Debit": { "count": 4 }, "Credit": { "count": 4 }, "Net": { "count": 4 } } } }, dataSourceType: 'json', autoGenerateColumns: false, autoGenerateLayouts: false, responseDataKey: 'Records', generateCompactJSONResponse: false, columns: [{ headerText: '<span style=\'text-align: left; display:block;\'>Transaction Type<span>', key: 'fk_com_trans_type', width: '35%', hidden: false, formatter: null, template: '<span style=\'text-align: left; display:block;\'>${fk_com_trans_type}</span>' }, { headerText: '<span style=\'text-align: center; display:block;\'>Debit<span>', key: 'Debit', width: '22%', hidden: false, formatter: Orange.toCurrencyString2, template: '<span style=\'text-align: right; padding-right:20px; display:block;\'>${Debit}</span>' }, { headerText: '<span style=\'text-align: center; display:block;\'>Credit<span>', key: 'Credit', width: '21%', hidden: false, formatter: Orange.toCurrencyString2, template: '<span style=\'text-align: right; padding-right:20px; display:block;\'>${Credit}</span>' }, { headerText: '<span style=\'text-align: center; display:block;\'>Net<span>', key: 'Net', width: '21%', hidden: false, formatter: Orange.toCurrencyString2, template: '<span style=\'text-align: right; padding-right:20px; display:block;\'>${Net}</span>' }], features: [{ sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', name: 'Sorting', mode: 'single', type: 'local' }, { name: 'Selection', mode: 'row', multipleSelection: false }, { name: 'Resizing' }, { summaryExprUrlKey: 'Summaries', summariesResponseKey: 'Metadata.Summaries', columnSettings: [{ columnIndex: -1, allowSummaries: false, columnKey: 'fk_com_trans_type' }, { columnIndex: -1, allowSummaries: true, columnKey: 'Debit', summaryOperands: [{ type: 'sum', active: true, rowDisplayLabel: 'Total' }] }, { columnIndex: -1, allowSummaries: true, columnKey: 'Credit', summaryOperands: [{ type: 'sum', active: true, rowDisplayLabel: 'Total' }] }, { columnIndex: -1, allowSummaries: true, columnKey: 'Net', summaryOperands: [{ type: 'sum', active: true, rowDisplayLabel: 'Total' }] }], name: 'Summaries', showDropDownButton: false, showSummariesButton: false, type: 'local' }], jQueryTemplating: false, autoAdjustHeight: false, width: '100%', renderCheckboxes: true, localSchemaTransform: false });});
Hello Josh,
Thank you for your patience. I have done some looking into this matter and I have been unable to reproduce this issue. I am attaching my sample to this thread. What version on Ignite are you using? What service release? What summary operands are you referring to?
Sincerely,Mike P.Developer Support Engineer IIInfragistics, Inc.www.infragistics.com
Using your example, I can reproduce the issue. See below code. I added a Qty column and tried to total it using the sum operand. There are no errors thrown, but the totals don't show for that column.
If there's a way to attach a zip file, sorry, I missed it. Also, if there's a way to format code or maintain tabs in your forum, I haven't seen it, hence the ugly formatting, sorry.
I'm using the sample provided here to try and understand how to do this:
http://help.infragistics.com/jQuery/2011.2/ui.iggridsummaries click "column settings" then click "summary operands".
Code:
<!DOCTYPE html><html><link href="http://cdn-na.infragistics.com/jquery/20112/1023/themes/min/ig/jquery.ui.custom.min.css" rel="stylesheet" type="text/css" /><link href="http://cdn-na.infragistics.com/jquery/20112/1023/themes/min/base/ig.ui.min.css" rel="stylesheet" type="text/css" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script><script src="http://cdn-na.infragistics.com/jquery/20112/1023/js/combined/min/ig.ui.min.js" type="text/javascript"></script>
<head> </head> <script> var products = []; products[0] = { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381", "Qty": 5 }; products[1] = { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "Qty": 10 }; products[2] = { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "Qty": 2 }; /*products[3] = { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" }; products[4] = { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" }; products[5] = { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" }; products[6] = { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" }; products[7] = { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" }; products[8] = { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }; products[9] = { "ProductID": 321, "Name": "Chainring Nut", "ProductNumber": "CN-6137" }; */ $(function(){ $("#grid1").igGrid({ autoGenerateColumns: false, columns: [ { headerText: "Product ID", key: "ProductID", }, { headerText: "Name", key: "Name", }, { headerText: "Product Number", key: "ProductNumber", }, { headerText: "Qty", key: "Qty", } ], width: "800px", height: "400px", dataSource: products, features: [ { name: "Sorting", type: "local", columnSettings: [ {columnKey: "ProductID", currentSortDirection:"ascending"}, {columnKey: "ProductNumber", allowSorting: false } ] }, { name:"Selection", mode:"row", multipleSelection:true, activation:true }, { name:"Paging", type: "local", pageSize: 5 }, { name: 'Summaries', columnSettings: [ { columnKey: "Qty", allowSummaries: true, summaryOperands: [{ "rowDisplayLabel": "Total", "type": "sum", "active": true, "order": 0, decimalDisplay: 3 }] } ], showDropDownButton: false, showSummariesButton: false, type: 'local' } ] }); }); </script> <body> <div ID="grid1"></div> </body></html>
Thanks Mike! That was the issue.
It'd be great if unset dependent properties like this threw errors instead of silently failing. Or, at the very least, is there some list of dependencies each feature has? This is not the first time I've spent a few hours guessing which combinations of properties are necessary for a certain feature.
Thank you for the update. I have done some further looking into this matter and have found why you are experiencing this issue. The reason for this is your columns don’t have a dataType declared for them. I am attaching a sample with the dataType declared for the columns and you can see that the summaries properly display with this.
Please let me know if you have any questions concerning this matter.