1

i am using jqgrid with the treegrid view and most of the columns are numbers that are aggregated up the tree. The one missing piece is having a total row to aggregate the top level hierarchy. Is there something built into jqgrid to support this or should be passed down the:

Alex
  • 21,273
  • 10
  • 61
  • 73
leora
  • 188,729
  • 360
  • 878
  • 1,366

1 Answers1

5

Tree grid support footer row (see the second picture here) for tree grid in the same way like for the standard grid. If you calculate the content of the summary row on the server you can use userdata in the JSON input (see here). If you want have custom formatting of the summary row or if you want to calculate the values for the summary row on the client you can use footerData method inside of loadComplete for example. See here for an example.

The following simple demo produce the output: enter image description here

The changes in the original treegrid code are the following:

footerrow: true,
loadComplete: function () {
    $(this).jqGrid('footerData','set',
        {name:'TOTAL', num:"500", debit:"<i>Bla</i> Bla",
        credit:'20', balance:'<span style="color:red">-1000</span>'});
}
Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • if i want to display just one value in the first td like for example "Total: 2324", is it possible to set callspan for the that td? – angularrocks.com Sep 06 '11 at 08:36
  • 1
    @bigb: I think it should work, but you should don't forget to hide the next `` element of the row. See [here](http://stackoverflow.com/questions/5625325/how-to-merge-cells-in-jqgrid-4-0/5625959#5625959) for details. – Oleg Sep 06 '11 at 08:44
  • and one more thing is it possible to do similar to `footerrow` but to display that in the top(first row)? – angularrocks.com Sep 06 '11 at 08:54
  • 1
    @bigb: Yes it's also possible. See my [old demo](http://www.ok-soft-gmbh.com/jqGrid/TopFooter.htm) from [the answer](http://stackoverflow.com/questions/5632506/jqgrid-fixed-row/5633492#5633492) – Oleg Sep 06 '11 at 09:07
  • in my first comment i meant that i want to display just one td in `footer`, all the rest data rows staying the same. If i get the last `tr` after i call `grid.jqGrid('footerData','set',{name:'Total : ' + counter });` in `loadComplete` event, a am getting the last data `tr` but not footer `tr`, so not sure how to get `footer` to modify, so probably i need to do that on some event after jqgrid nearly displayed. – angularrocks.com Sep 08 '11 at 13:13
  • @bigb: Sorry, but I don't understand you. You wrote "i want to display just one td in `footer`". What do you mean? The footer div has the same columns like the main grid. If the name of the last column is 'lastCol' you can set the test with `grid.jqGrid('footerData','set',{lastCol:'Total : ' + counter });` – Oleg Sep 08 '11 at 13:34
  • i want to be able to modify the foooter, i want to group cells with callspan (for first cell i want to be able to say `callspan=N` for example) and than also i want to change background on that `td` because my first cell contains Id and it has background on that. – angularrocks.com Sep 08 '11 at 13:42
  • 1
    @bigb: OK, I understand. Try with this `grid.closest("div.ui-jqgrid-view").children("div.ui-jqgrid-sdiv").find("table.ui-jqgrid-ftable tr.footrow")` to get the `tr` of the footer. – Oleg Sep 08 '11 at 13:54