jquery - jqGrid treeGrid catch expand collaps events

Question

I use jqGrid to epose some big Tree. Now I want to remember expanded and collapsed nodes in cookies

So I want to catch expand and collaps event. I couldn't find it in manual

So I've resolved it in this way

grid.find("div.treeclick").bind("click",function(e){
    classes = $(this).attr('class');
    //returns:
    //ui-icon treeclick ui-icon-triangle-1-s tree-minus
    //ui-icon treeclick ui-icon-triangle-1-e tree-plus
    if(classes.indexOf('-minus') != -1)
        alert ('Expand!');
    else if(classes.indexOf('-plus') != -1)
        alert ('Collaps!')
});

Could anybody propose another way?

Answer 1

There are currently no event or callback in the jqGrid which could help you to catch collapsing or expanding of the tree nodes.

In general the code which you posted do correct tests. Nevertheless you self are not full satisfied by the solution. I find it also not so good. The most problem which I see is that you test which icon has the button, but the icon will be changed by the original handler of the same events in the grid. The the order of the bindings should be very important.

On your place I prefer to use subclassing technique in such cases when no event exists. It's very easy, but it's 100% effective.

The Tree Grid has methods expandNode and collapseNode which are documented. The method will be called internally by jqGrid too in case of clicks on the node icon. The method expandNode calls reloadGrid to display the expanded tree.

So I suggest to add the following code after the Tree Grid is created:

var orgExpandNode = $.fn.jqGrid.expandNode,
    orgCollapseNode = $.fn.jqGrid.collapseNode;
$.jgrid.extend({
    expandNode: function (rc) {
        alert('before expandNode: rowid="' + rc._id_ + '", name="' + rc.name + '"');
        return orgExpandNode.call(this, rc);
    },
    collapseNode: function (rc) {
        alert('before collapseNode: rowid="' + rc._id_ + '", name="' + rc.name + '"');
        return orgCollapseNode.call(this, rc);
    }
});

You can see the results on the demo.

UPDATED: Free jqGrid supports callbacks and events, which makes the above overwriting of expandNode and collapseNode unneeded. It supports already additional callbacks called before or after expanding or collapsing of nodes or rows. The names of callbacks: treeGridBeforeExpandNode, treeGridAfterExpandNode, treeGridBeforeCollapseNode, treeGridAfterCollapseNode, treeGridBeforeExpandRow, treeGridAfterExpandRow, treeGridBeforeCollapseRow, treeGridAfterCollapseRow and the corresponding jQuery Events jqGridTreeGridBeforeExpandNode, jqGridTreeGridAfterExpandNode, jqGridTreeGridBeforeCollapseNode, jqGridTreeGridAfterCollapseNode, jqGridTreeGridBeforeExpandRow, jqGridTreeGridAfterExpandRow, jqGridTreeGridBeforeCollapseRow, jqGridTreeGridAfterCollapseRow. All callbacks has one parameter: options, which has two properties: rowid and item. The item is the node, which will be expanding/collapsing.