How to prevent row selection on tree_mode node collapse in free-jqgrid?

Question

I'm using free-jqgrid 4.15.2 as navigation. It's in tree mode and when users collapse a node, the default behaviour is to immediately select it. I'd like them to be able to hide sections of the menu without selecting the clicked row, but there do not seem to be easily accessible events that correspond with expanding and collapsing tree_mode nodes.

I have these events in my master branch, but our move to free-jqgrid broke it. Here's the working code using a very early version of jqgrid.

$.jgrid.extend({
    expandNode: function ( rc ) {
        debugger
    },
    collapseNode: function ( rc ) {
        debugger
    }
});

I also tried hijacking setTreeNode, but the global variables were missing in my extension file.

setTreeNode: function () {
        // TODO: Move the code in setTreeGrid because it uses currently no parameters
        // and it's don't make any actions with specific row
        return this.each(function () {
            var continue_selection = true;
            var $t = this, $self = $($t), p = $t.p;
            if (!$t.grid || !p.treeGrid) { return; }
            var expanded = p.treeReader.expanded_field,
                isLeaf = p.treeReader.leaf_field,
                beforeSelectRow = function (e, rowid, eOrg) {
                    if (eOrg != null) {
                        var $target = $(eOrg.target),
                            $td = $target.closest("tr.jqgrow>td"),
                            $tr = $td.parent(),
                            expendOrCollaps = function () {
                                var item = p.data[p._index[stripPref(p.idPrefix, rowid)]],
                                    collapseOrExpand = item[expanded] ? "collapse" : "expand";
                                if (!item[isLeaf]) {
                                    base[collapseOrExpand + "Row"].call($self, item, $tr);
                                    continue_selection = base[collapseOrExpand + "Node"].call($self, item, $tr);
                                }
                            };
                        if ($target.is("div.treeclick")) {
                            expendOrCollaps();
                        } else if (p.ExpandColClick) {
                            if ($td.length > 0 && $target.closest("span.cell-wrapper", $td).length > 0) {
                                expendOrCollaps();
                            }
                        }
                        return true; // allow selection
                    }
                };

            if (continue_selection) {
                $self.off("jqGridBeforeSelectRow.setTreeNode");
                $self.on("jqGridBeforeSelectRow.setTreeNode", beforeSelectRow);
            }
        });
    },

How can I prevent row selection when expanding or collapsing nodes?

Acanthus

Answer 1

Selection of row is the base functionality of jqGrid and it's independent on the usage of TreeGrid. In other words one can use beforeSelectRow to prevent row selection on click of the ExpandColumn column and to use selectOnContextMenu: false additionally to prevent row selection on click on the right mouse button (on context menu). The corresponding code of beforeSelectRow could be the following:

beforeSelectRow: function (iRow, e) {
    var $td = $(e.target).closest("tr.jqgrow>td"),
        iCol = $td.length > 0 ? $td[0].cellIndex : -1,
        p = $(this).jqGrid("getGridParam"),
        cm = iCol >= 0 ? p.colModel[iCol] : null;

    if (cm != null && cm.name === p.ExpandColumn &&
            $(e.target).closest(".tree-wrap").length > 0) {

        return false; // prevent row selection
    }
    return true;
}

The above code prevent selection if the expand/collapse icon of TreeGrid was clicked. One can remove $(e.target).closest(".tree-wrap").length > 0 part fron the if to prevent selection of click on any place in the column. It could be practical if ExpandColClick: true option is used.

Shatzer

I implemented this code, and while it does execute before the collapse, returning false does not seem to stop the event from bubbling up unless i edit jqGrid's javascript.. it looks like on line 5809, there's a feedback.call that executes onCellSelect with no check to see if selectionAllowed is true. I wrapped this in an if statement and got the behaviour I wanted. Is there a better way to fix this? – Acanthus

@catbadger: I'm not sure that I correctly understand your current problem. onCellSelect has no relation with selection the grid. It should be on click on the cell. On the other side, the callback onSelectRow will be called only it the row will be selected. It could be called not only if the user click on the row, but in case of selection the row by method setSelection. If you need to execute some code only in case of row selection then you should place the code inside of your onSelectRow callback and not inside of onCellSelect. – Shatzer

onCellSelect triggers closing the navigation widget as we do across our (rather large) system. I will look into changing it. – Acanthus

@catbadger: Sorry, but I can't follow you. I can explain you only why onCellSelect do what it do. I don't see the behavior as an error. If you need to implement some behavior on select of the row then you should use onSelectRow. If you need to have indexes of column and row then you can easy get there from the event object e. – Shatzer