Expand group in JQGrid when header is clicked

Question

How can I automatically expand a group in jqGrid when the header is clicked? (rather than just the +/- icon). I had hoped I could do something with onSelectRow and 'groupingToggle' but onSelectRow doesn't appear to be called when you select the "grouped" row.

I've seen some existing pull requests for this at https://github.com/tonytomov/jqGrid/pull/350 and https://github.com/tonytomov/jqGrid/pull/353 but not sure what happened to them as it doesn't seem to the behavior I see.

Answer 1

I found the question interesting, so I created the demo which demonstrates one of possible implementations of the requirement. It uses the following simple code:

var groupingView = $grid.jqGrid("getGridParam", "groupingView"),
    plusIcon = groupingView.plusicon,
    minusIcon = groupingView.minusicon;
$grid.click(function (e) {
    var $target = $(e.target),
        $groupHeader = $target.closest("tr.jqgroup");
    if ($groupHeader.length > 0) {
        if (e.target.nodeName.toLowerCase() !== "span" ||
                (!$target.hasClass(plusIcon) && !$target.hasClass(minusIcon))) {
            $(this).jqGrid("groupingToggle", $groupHeader.attr("id"));
            return false;
        }
    }
});

In the above code I register click event handle and first of all verify inside the handle that the click was inside of the grouping header. The grouping header is <tr> having "jqgroup" class. By the way the id of the <tr> is the groupid which can be used on groupingToggle method. The only additional thing which need be validate that the click was not on the "+" or "-" icon which already calls groupingToggle method in the corresponding jqGrid event handle.