CODEWITHSUNDEEP
jqueryignite-uiiggrid
Manish Kumar
Manish Kumar

Reputation: 507

How to add Custom summaries for autogenerated colums?

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.

Upvotes: 1

Views: 220

Answers (1)

Vasil Pavlov
Vasil Pavlov

Reputation: 51

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.

Enabling the “Summaries” feature would work out-of-the-box if your columns contain 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. 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. 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 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, might 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 note that in order to use the Summaries feature it should be enabled in your grid features configuration, for example:

features: [
    {
        name: 'Summaries'
    }
]

Upvotes: 3

Related Questions