I am using iggrid and my autoGenerateColumns: true, is true. There are no fixed no of columns generated every time.
I want to use custom summary to calculate sum of each rows of a dynamic column and show it at the bottom.
Hello Manish,
Thank you for posting in our forum.
In order to be sure your question gets answered correctly, I would appreciate some additional information:
What you describe as a custom summary is a summary that shows the sum of all rows, which is supported out-of-the-box by the igGrid (if Summaries have been enabled) and could be setup by setting the column settings and the summary operand type to “sum” in the “Summary” options.
Providing me with those details would allow me to give you a more precise answer.
“no fixed no of columns” means i am using a webapi call and it returns dates of month when the student was absent. So the dates count most of the time varies.
"Do you know in advance the columnKey " thats the issue as i dont know in advance the column same. Its different for every user.
After this API returns the dates when the student was absent, you display them horizontally as grid columns, is that correct? So what do you display vertically in the rows then? Is it the different students?
I am asking you, because it looks like the data is structured in an unusual way - usually the dates are being displayed vertically, and the different students are shown as columns. Restructuring the data that way would allow you to use the Summaries, and get the sum of all days a student has been absent, without having to implement some custom logic.
Enabling the “Summaries” feature would still work out-of-the-box if your columns contain some numeric values.
If you want to show a specific summary (in your case the “sum”), but you don’t know the column keys, there is a way to hide the rest of the default summaries by using a CSS selector, like this one:
<style> tfoot[role='rowgroup'] tr:not([id$='_sum']) { display: none } </style>
If the “Summaries” feature has been enabled, the above CSS would hide all summary rows except the “Sum”, which I believe is what you want to do?
Keep in mind this would hide the rest of the summary operands, effectively leaving only a single row with the sum summary, but it would show summaries for all numeric columns.
Here is an isolated sample that shows the approach described above:
igGridSummary.zip
If you want to show a “sum” summary for specific columns only, try getting the columns of the grid after it has been initialized, by using something like this:
$("#grid").igGrid("option", "columns")
This would allow you to set the column settings for the Summary feature even after it has been initialized. Only the getter for the Summary columnSettings is shown in the documentation, but it would work as a setter as well. Please note this was not intended for public use, but it would work for you. In case you have a column with the key of “UnitPrice” and you want to disable its summary after the grid has been initialized, the code would look like this:
$("#grid").igGridSummaries("option", "columnSettings", [{ columnKey: "UnitPrice", allowSummaries: false },]);
I still think transforming the API data before databinding the igGrid so that the dates are being displayed vertically on different rows, instead of visualizing then as columns, would be a better idea – this would allow you to use the Summaries more easily and sum the number of days a student has been absent.
Please let me know if I have misunderstood your requirements and the above suggestions do not work for your scenario.
The above solution may fix my issue.
Can you share an example of
with
$("#grid").igGridSummaries("option", "columnSettings", [{ columnKey: "UnitPrice", allowsummaries:false},}];
i am getting the below error while setting this
Uncaught Error: cannot call methods on igGridSummaries prior to initialization; attempted to call method 'option'.
Below is my code
$("#grid14574").igGrid({ caption : "<span></span>", width: '100%', defaultColumnWidth: "200px", autofitLastColumn: false, autoGenerateColumns: true, dataSource: visualizer14574, responseDataKey: "results", autoCommit: true, rowsRendered: function(evt, ui) {setTimeout(function(){ $.each($("#grid14574").igGrid("option", "columns"),function(k,v){ if(v.key!='CheckInTime') { $("#grid14574").igGridSummaries("option", "columnSettings", [{ columnKey: v.key,allowSummaries:true}]); } });}, 1000); }, features: [ { name: "Hiding" }, { name: "Sorting", sortingDialogContainment: "window" }, { name: "Filtering", type: "local", }, { name: "Paging", pageSize: 100 } ] });
Please note that in order to use the Summaries feature it should be enabled in your grid features configuration, for example:
features: [ { name: 'Summaries' } ]
Let me know if that solves your issue.
Regards,
Maya Kirova
Looks like i am very close but my custom summaryCalculator is not working
$("#grid14574").igGridSummaries("option", "columnSettings", [{ columnKey: v.key,allowSummaries:true,summaryOperands: [{ rowDisplayLabel: "Total", type: "Sum", summaryCalculator: $.proxy(totalValues , this)}]}]);
its not calling my total values method.