Hi Team,
I'm using igniteui-angular package with version 8.0.3 and using in angular project with angular version 6.
In igx-grid, I want the sum of a column for the selected rows only( rows with check-boxes checked). Please help/guide me to achieve the same.
Thanks & Regards,
Akshay
Hello Ashkay,
Personally I’d suggest you to show the sum on a custom div instead of using summaries.
The point of the summaries is to gather the whole information out of a certain row and show it at the bottom, so if you want to use it at all costs, you’ll have to override IgxNumberSummaryOperand, just as you began in your example. You’d have to add custom property into the new SumSummary class, which would receive information from the event listener method. The way it’s gonna be seeded with data is through an incrementation of the retriggerRootPipe. In this way, the pipe would be forcedly updated and the operate function would be invoked (it cannot happen with an explicit call, as you asked).
I’m attaching a working sample in Stackblitz so that you could see what I meant. Anyways, for such a custom behavior, I’d certainly suggest using a div instead of summaries.
And here’s a link to the sample: https://stackblitz.com/edit/angular-ko2rru-4sagzg
Hope it helped you out!
All the best wishes,
Petko Bozhinov
Thanks Petko!
I'm able to calculate the sum of selected rows.
Also, I'm using summaries attribute on igx-column like as below :
[summaries]="sumSummary"
class SumSummary extends IgxNumberSummaryOperand { constructor() { super(); } public operate(data?: any[]): IgxSummaryResult[] { const result = []; result.push({ key: "sum", label: "", summaryResult: IgxNumberSummaryOperand.sum(data) }); return result; }}is there any way where i can assign my custom selected rows sum to the summeries.Do i need to call operate function explicitly? ORshowing sum on custom div instead of using summeries attribute would be easier?Thanks,Akshay
Hello Akshay,
Please, let me know if any further problems occur with that sample.
Thanks!
Best regards,
Thank you for your inquiry!
In order to get the desired result, according to the docs, it’s recommended that you provide a primary key. That can happen by setting a primaryKey attribute on your igx-grid element. After that, you may wish to listen for an update in the state of the grid’s checkboxes. That would happen by setting an onRowSelectionChange event listener on your grid. It receives an $event property, which has two parameters that are concerning us in the particular case: oldSelection and newSelection. OldSelection are the selected elements prior the event and newSelection is what’s checked after the event was fired. We’d like to use newSelection.
In the newSelection array we got the primary keys of the rows we’ve selected. Now we may wish to obtain the data in each respective row. That could be done with a call to the getRowByKey method on the grid. As an argument to that call one has to pass the primary key from the newSelection array. As a result, an instance of IgxGridRowComponent would be returned, which keeps all the data into the selected row besides all the other meta data. One could easily obtain the information from the desired col via the rowData method.
I’ve created a sample that’s forked from the igx-grid docs in order for you to have a better understanding on my explanations. You can find it here: stackblitz.com/.../angular-ko2rru-d3ekbe