WijGrid : Display Total Row at The Top

The Wijmo Grid widget (wijgrid) can be used to display items from a data source in an interactive and fully customizable table. It allows end users to interactively select, edit, sort, scroll through, filter, and group data. You can also calculate aggregate values like count, sum, average etc. on the column and place them in the column footer cell or group header/footer rows using aggregate property of column as shown in this demo. However, if the showFooter option is disabled or grid does not contain any groups, setting the "aggregate" option has no effect. Sometimes, we have a situation wherein the footer is not visible and neither grouping is applied on the wijgrid. This blog explains how you can add a Total Row at the top in such scenarios. The trick is to add a invisible column and apply grouping on this column. After doing so, you can handle the cellStyleFormatter function of the wijgrid and if the rowType is a GroupHeader row then you can modify the text as per our requirement. Here is the code implementing the same;

  $("#demo").wijgrid({  
       allowSorting: true,  
       columns: [  
                 { aggregate: "count" },  
                 {  },  
                 { dataType: "currency", aggregate: "sum" },  
                 { dataType: "number", dataFormatString: "n0", aggregate: "sum" },  
                 { visible: false, groupInfo: { position: "header", aggregate: "count", headerText: 'count=**{0}**'} }  
                ],  
        cellStyleFormatter: function (args) {  
                      if (args.row.type == 16) {  
                        switch (args._cellIndex) {  
                            case 0:  
                                args.$cell.text(args.$cell.text());  
                                break;  
                            case 1:  
                                args.$cell.text('Sum=' + args.$cell.text());  
                                break;  
                            case 2:  
                                args.$cell.text('Sum=' + args.$cell.text());  
                                break;  
                        }  
                    }  
                }  
         });

Refer to this sample for complete implementation.