Selecting multiple rows in jqGrid tree

Question

Is there any way to select multiple rows in a jqGrid tree structure? On single clicking on any row I am providing an inline editing facility and on double clicking I am expanding the row.

If I select rows with the shift key held it should select the rows. I am specifying multiselect: true, but it's not working.

rowNum:10,
rowList:[10,20,30],
pager: '#pcolch',
sortname: 'no',
treeGridModel:'adjacency',
autowidth:false,
sortorder: 'desc',
caption:"<a href='#'>Projects</a> > Tasks",
toolbar:[true,"top"],
treeGrid: true,
cellEdit: true,
sortable: true,
shrinkToFit :true, 
//viewrecords: true, 
height:'auto',
ExpandColumn:'name',
cellsubmit : 'clientArray',
multiselect:true,

score 2 · Accepted Answer · edited May 23 '17 at 12:06

The list of limitations of the current implementation of Tree Greed seems be not full in the documentation. If you examine the source code of jqGrid you will fine the lines which reset some other jqGrid parameters:

multiselect = false;
subGrid = false;
altRows = false;
pgbuttons = false;
pginput = false;
gridview = true;
rowNum = 10000; // if rowTotal is null
rowList = [];

So the current implementation of the Tree Grid don't support selecting of the multiple rows.

If you really need such feature you have to implement it yourself. To do this you can add in colModel the column having the predefined 'checkbox' formatter having formatoptions: {disabled: false} as additional option and implement the behavior of selection which you need. See the answer and this one for details. It could be needed to implement some additional actions in the beforeSelectRow callback.

score 0 · Answer 2 · answered Jul 08 '15 at 17:41

I'm not sure if this is still of interest, but today I implemented the multiselect option (Click/Ctrl-Click/Shift-Click) in a treegrid by setting the aria-selected attribute (true/false) and adding/removing the ui-state-highlight class for visual effects.

This all happens in the beforeRowSelect callback which returns false to prevent normal row selection callback.

Hope this can help someone else! I program like a 5-year-old, so please go easy on me! :-)

Last note: The variable lastSelIdx is a global variable storing the last select row index and needs to be declared outside the function.

beforeSelectRow: function(id, e) {
        var row = $("#" + id);
        var currSelIdx = $("#tree").getInd(id) - 1;
        if (e.ctrlKey) {
                // Ctrl was pressed - Add to selection or remove
                if (row.attr("aria-selected") == "true") {
                        row.removeClass("ui-state-highlight").attr("aria-selected", "false");
                } else {
                        row.addClass("ui-state-highlight").attr("aria-selected", "true");
                }
                lastSelIdx = currSelIdx;
        } else if (e.shiftKey) {
                // Shift was pressed. Select all between last selected and curently selected
                var rows = $(".jqgrow");
                // Select all rows between the last selected
                if (!lastSelIdx) lastSelIdx = 0;
                if (lastSelIdx > currSelIdx) {
                        selmin = currSelIdx;
                        selmax = lastSelIdx;
                } else {
                        selmin = lastSelIdx;
                        selmax = currSelIdx;                        
                }
                for (i = 0; i < rows.length; i++) {
                        if (i >= selmin && i <= selmax) {
                                $(rows[i]).addClass("ui-state-highlight").attr("aria-selected", "true");                                
                        } else {
                                $(rows[i]).removeClass("ui-state-highlight").attr("aria-selected", "false");                                
                        }
                }
        } else {
                // Simple click
                $("tr[aria-selected=true]").each(function() {
                        $(this).removeClass("ui-state-highlight").attr("aria-selected", "false");
                });
                row.addClass("ui-state-highlight").attr("aria-selected", "true");
                lastSelIdx = currSelIdx;
        }
        return false;
},

Selecting multiple rows in jqGrid tree

2 Answers2

Linked