Hi experts,
When I read unbounded column section, I see I can append a Total column to a grid, and when I update the values in previous columns, the total column value get updated automatically. Is there a way to do this in a row manner? I'd like to append a total row to my grid, and the value of this row is calculated base on previous rows. When you update values in previous rows, the total row should get updated automatically.
My second question is how to add a red color to this total row cell, when the value is greater than a certain value, say 100.
And I see the summary feature maybe just meet my requirement, if so, how can I make the summary red when the summary is greater than 100?
Thanks in advance.
Hello Ming,
You can check for example on grid rendered event for the value of the respective summary using summariesFor method, for instance:
rendered: function(evt, ui){
var colSummary = $("#grid").igGridSummaries("summariesFor", "Name");
if(colSummary[0].result > 100){
$("tr#grid_summaries_footer_row_count td[data-key='Name']").css("background-color", "red")
}
But please note that this is just a sample code. The column key will be different on your side and the respective column summary could contain more than one summaries, then you should access the desired summary by its index (in demonstrated code, there is only one summary, therefore the index is 0). If you have any questions, please let me know.
Regards,
Tsanna
Thank you very much. Just one more thing, if I'd like to add a empty line to grid, and calculate the sum value manually, can you give a few suggestions how you will do this? What come to my mind is in iggridupdatingeditcellended event, find the columnIndex I'm working on, then loop through all rows, get the cell in the columnIndex, get it's value and add them up, update the "sum row" column value, and if the value is greater than a value, set the "sum row" column cell's bgcolor to red.
Well, another problem come to my mind is how do I differentiate "sum row" from "normal data row"? Is there a way to attach metadata to row/cell?
You don't need to loop through all rows. You can assign the new value to the underlying data source value and then check the respective summary for this column similarly as I've already suggested, for example:
editCellEnded: function(evt, ui){ var dsRecord = $("#grid").data("igGrid").options.dataSource[ui.rowID-1]; dsRecord[ui.columnKey] = ui.value; $("#grid").igGrid("dataBind"); var colSummary = $("#grid").igGridSummaries("summariesFor", "ListPrice"); if(colSummary[3].result > 250000){ $("tr#grid_summaries_footer_row_sum td[data-key='ListPrice']").css("background-color", "red"); }
I'm attaching a sample with similar scenario for your reference.
If you have any further questions, please let me know.
I got it, thank you very mcuh