I would like to add Summaries of "total records", which should contain sum of every pages, to the top of each page and not Summaries per page.
$("#grid").igGrid({ columns: [ { headerText: "Account ID", key: "account_id", dataType: "string", width: "6%" }, { headerText: "Total Spent", key: "total_spent", dataType: "number", format: "number", width: "6%" } ], dataSource: "report.php?performance", enableHoverStyles: false, responseDataKey: "data", requestType: "post", features: [ { name: "Paging", type: "remote", recordCountKey: "total_records_count", pageSizeUrlKey : "page_size", pageIndexUrlKey: "page_index", pageSizeList: [15, 25, 50] },
Hello Sebrina,
Please note that Summaries feature along with Paging works the way you're describing. It displays the whole information per column at the bottom of every grid page. For your reference you may take a look at the following sample: http://jsfiddle.net/tL46hpym/ If you have any questions, feel free to contact me.
Regards,
Tsanna
Hi Tsanna,
Your sample surely helps. Now I am facing another obstacle, the summaries are not showing with the datasource that I am passing.
I doubled check the settings by giving it a static data as below and it works => var ds
Therefore, I am pretty sure it has to do with my datasource
=>dataSource: "report.php?newaccount_performance&st_time="+st_time+"&end_time="+end_time
var ds = [ { "account_id": 1, "ac_name": "Adjustable Race", "contact_id": 2, "contact_name": "Adjustable Race", "agency_id": 3, "agency_name": "Adjustable Race", "sales_team": "Adjustable Race", "FB": 5, "Google": 6, "MSN": "Adjustable Race", "VSMedia": 7, "Sociomantic": 8, "Line": 9, "TenMaxMargin": 10 , "Total": 11 } ];
Did you set "remote" type of the Summaries feature? Please try also to change dataSource option to "dataSourceUrl" since your data is remote. For you reference you may take a look at the following sample, where are demonstrated remote summaries for the igGrid: http://www.igniteui.com/grid/summaries-remote If I can provide you with further assistance, feel free to contact me.
Regards,Tsanna
I am not sure of the settings if I am passing data remotely as below,
dataSource: "report.php?newaccount_performance&st_time="+st_time+"&end_time="+end_time, enableHoverStyles: false, responseDataKey: "data", requestType: "post"
I am still not able to display summaries with remote data. Can you please create a sample with remote data (not local data)?
Thanks
The summaries setting works fine when tested with local data.
But I am still not able to reproduce with remote data, please see following
$("#grid").igGrid({ autoGenerateColumns: true, columns: [ { key: "none", hidden: true }, { headerText: "Account ID", key: "account_id", dataType: "string", width: "6%" }, { headerText: "Account Name",key: "ac_name", dataType: "string", width: "6%" }, { headerText: "發稿人 ID", key: "contact_id", dataType: "string", width: "6%" }, { headerText: "發稿人 Name", key: "contact_name", dataType: "string", width: "6%" }, { headerText: "Agency ID", key: "agency_id", dataType: "string", width: "6%" }, { headerText: "Agency Name", key: "agency_name", dataType: "string", width: "6%" }, { headerText: "Team", key: "sales_team", dataType: "string", width: "6%" }, { headerText: "Facebook", key: "FB", dataType: "number", format: "number", width: "6%" }, { headerText: "Google", key: "Google", dataType: "number", format: "number", width: "6%" }, { headerText: "Microsoft", key: "MSN", dataType: "number", format: "number", width: "6%" }, { headerText: "VSMedia", key: "VSMedia", dataType: "number", format: "number", width: "6%" }, { headerText: "Sociomatic", key: "Sociomantic", dataType: "number", format: "number", width: "6%" }, { headerText: "LineTV", key: "Line", dataType: "number", format: "number", width: "6%" }, { headerText: "Native Ad", key: "TenMaxMargin", dataType: "number", format: "number", width: "6%" }, { headerText: "Total", key: "Total", dataType: "number", format: "number", width: "6%" } ], dataSource: "report.php?newaccount_performance&st_time="+st_time+"&end_time="+end_time, // dataSource: ds, enableHoverStyles: false, responseDataKey: "data", requestType: "post", features: [ { name: "Summaries", //showDropDownButton: false, type: "remote", summariesResponseKey: "summaries", columnSettings: [ { columnKey: "account_id", allowSummaries: false }, { columnKey: "ac_name", allowSummaries: false }, { columnKey: "contact_id", allowSummaries: false }, { columnKey: "contact_name", allowSummaries: false }, { columnKey: "agency_id", allowSummaries: false }, { columnKey: "agency_name", allowSummaries: false }, { columnKey: "sales_team", allowSummaries: false }, { columnKey: "FB", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "Google", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "MSN", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "VSMedia", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "Sociomantic", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "Line", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "TenMaxMargin", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "Total", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] } ] }
});
Yes, It works fine with local data when I tested my code with fake datasource.
But I am still not able to display summaries with remote data. Please see the following,
$("#grid").igGrid({ autoGenerateColumns: true, columns: [ { key: "none", hidden: true }, { headerText: "Account ID", key: "account_id", dataType: "string", width: "6%" }, { headerText: "Account Name",key: "ac_name", dataType: "string", width: "6%" }, { headerText: "發稿人 ID", key: "contact_id", dataType: "string", width: "6%" }, { headerText: "發稿人 Name", key: "contact_name", dataType: "string", width: "6%" }, { headerText: "Agency ID", key: "agency_id", dataType: "string", width: "6%" }, { headerText: "Agency Name", key: "agency_name", dataType: "string", width: "6%" }, { headerText: "Team", key: "sales_team", dataType: "string", width: "6%" }, { headerText: "Facebook", key: "FB", dataType: "number", format: "number", width: "6%" }, { headerText: "Google", key: "Google", dataType: "number", format: "number", width: "6%" }, { headerText: "Microsoft", key: "MSN", dataType: "number", format: "number", width: "6%" }, { headerText: "VSMedia", key: "VSMedia", dataType: "number", format: "number", width: "6%" }, { headerText: "Sociomatic", key: "Sociomantic", dataType: "number", format: "number", width: "6%" }, { headerText: "LineTV", key: "Line", dataType: "number", format: "number", width: "6%" }, { headerText: "Native Ad", key: "TenMaxMargin", dataType: "number", format: "number", width: "6%" }, { headerText: "Total", key: "Total", dataType: "number", format: "number", width: "6%" } ], dataSource: "report.php?newaccount_performance, // dataSource: ds, enableHoverStyles: false, responseDataKey: "data", requestType: "post", features: [ { name: "Summaries", //showDropDownButton: false, type: "remote", summariesResponseKey: "summaries", columnSettings: [ { columnKey: "account_id", allowSummaries: false }, { columnKey: "ac_name", allowSummaries: false }, { columnKey: "contact_id", allowSummaries: false }, { columnKey: "contact_name", allowSummaries: false }, { columnKey: "agency_id", allowSummaries: false }, { columnKey: "agency_name", allowSummaries: false }, { columnKey: "sales_team", allowSummaries: false }, { columnKey: "FB", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "Google", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "MSN", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "VSMedia", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "Sociomantic", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "Line", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "TenMaxMargin", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] }, { columnKey: "Total", allowSummaries: true, summaryOperands: [ { "rowDisplayLabel": "Sum", "type": "SUM", "active": true, width: "6%"}] } ] }