We solved the same problem with subgrids, and the solution can be adapted to the grouping scenario. We used custom formatting to add style and data attributes for header / checkbox flags and subheading flags. Then we have a link or flag in the title bar with an event on it, which jQuery uses to select all the flags in the subnet with the corresponding data attribute and style. Finally, the grid load completion event adds a click event handler for the check all link.
Here is an example of custom formatting for a sub-heading checkbox column. Notice the data-groupingId attribute, which stores the value that is used to associate the header line with the subnet lines.
function checkBoxColumnFormatter(cellvalue, options, rowObject) { return "<input type=\"checkbox\"" + data-groupingId=\"" + rowObject.GroupingId + "\" class=\"subgridCheck\" />"; }
Here is an example of custom formatting for the check all column. Notice the data-groupingId attribute, which stores the value that is used to associate the header line with the subnet lines.
function checkAllColumnFormatter(cellValue, options, rowObject) { var link = $("<a class=\"checkAll\" href=\"#\" data-groupingId=\"" + rowObject.Id + "\">Check All</a>"); var linkHtml = $("<div>").append(link.clone()).remove().html(); return linkHtml; }
Here is the download completion event that triggers click events for the "verify all" links created in the above format.
function mainGridLoadComplete(data) { $(".checkAll").click(function (e) { checkSubGridRows( $(this).attr("data-groupingId"));
And finally, here is the method that does the work.
function checkSubGridRows(groupingId) { $("#GridId .subgridCheck[data-groupingId=\"" + groupingId + "\"]").not(":disabled").each( function () { $(this).attr("checked", "checked"); }); }
It worked very well for us. Whatever is considered when the situation becomes complicated, I would prefer the client-side model to receive data from the JSON web service and be an authoritative source for jqGrid. I think that ultimately it would be preferable if jqGrid captured the data and swallowed the actual data objects, which makes it difficult or impossible to get the data directly for reference or processing. However, creating and managing a model / view section on the client side is not a trivial task. Thus, it works as a quick alternative. But be careful, because it can get out of FAST control.