TreeGrid XML shiftKey ctrlKey select

Question

I've gone through every example that I can find, and none seems to accommodate the specific scenario I require. I've found examples accommodating ctrl or shift-selecting, but only for JQGrid, not TreeGrid. Once I've taken these examples and attempt to tweak them to TreeGrid implementing an XML datatype and url, instead of JSON or "local", they break.

This most recent attempt involves binding the multiselecthandler taken from this url: http://www.trirand.com/blog/?page_id=393/feature-request/more-control-over-clickselect-behavior/&value=beforeSelectRow&type=1&include=1&search=1

I need to create a TreeGrid using XML that implements a selection method of: Single-click selects, ctrl-click appends to the selection, and shift-click selects each row between the last selected row and the current one. I've found a JSON-based JqGrid scenario from Oleg, but it doesn't work once I change it to use TreeGrid and XML. Please help.

Here's a subset of my XML generated by the url:

<?xml version="1.0"?>
<rows>
<page>1</page>
<total>1</total>
<records>1</records>
<row><cell>1</cell><cell>Bank Data</cell><cell></cell><cell>1</cell><cell/><cell>false</cell><cell>true</cell><cell>true</cell></row>
<row><cell>3</cell><cell>FINANCIAL PROFILE</cell><cell></cell><cell>2</cell><cell>1</cell><cell>false</cell><cell>false</cell><cell>true</cell></row>
<row><cell>4</cell><cell>Balance Sheet:</cell><cell></cell><cell>3</cell><cell>3</cell><cell>false</cell><cell>false</cell><cell>true</cell></row>
<row><cell>5</cell><cell>Total assets</cell><cell>EXFHBS01</cell><cell>4</cell><cell>4</cell><cell>true</cell><cell>false</cell><cell>true</cell></row>
<row><cell>11</cell><cell>Percent change in total assets</cell><cell>EXFHPC01</cell><cell>4</cell><cell>4</cell><cell>true</cell><cell>false</cell><cell>true</cell></row>
<row><cell>18</cell><cell>Held-to-maturity securities (Amortized cost)</cell><cell>EXFHBS03</cell><cell>4</cell><cell>4</cell><cell>true</cell><cell>false</cell><cell>true</cell></row>
<row><cell>25</cell><cell>Available-for-sale securities (Fair value)</cell><cell>EXFHBS04</cell><cell>4</cell><cell>4</cell><cell>true</cell><cell>false</cell><cell>true</cell></row>
<row><cell>31</cell><cell>Total securities</cell><cell>EXFHBS02</cell><cell>4</cell><cell>4</cell><cell>true</cell><cell>false</cell><cell>true</cell></row>
</rows>

and here is my treegrid code:

        $(document).ready(function(){
        $("#grid").jqGrid({
            treeGrid: true,
            treeGridModel: 'adjacency',
            ExpandColumn: 'item',
            url: 'parseCreateTreeGridXml.php', 
            datatype: 'xml',
            mtype: 'GET',
            colNames: ["ID", "Item", "Identifier"], 
            colModel: [
                {name: 'id', index: 'id', width: 2, hidden:false, key: true},
                {name: 'item', index: 'item', width: 40, hidden: false, sortable: true},
                {name: 'rcon', index: 'rcon', hidden:false, width: 5}
            ],
            treeIcons: {plus:'ui-icon-circle-plus',minus:'ui-icon-circle-minus',leaf:'ui-icon-stop'},
            rowNum: 10000,
            width: 980,
            height: '100%',
            multiselect: true
            beforeSelectRow: function(){ return false; }
        });
    });
    var grid = $("#grid");
    grid.bind("click", grid, multiSelectHandler);
    //grid.jqGrid('hideCol','cb');

    function multiSelectHandler(e) {
        var mygrid = e.data;
        var ts = mygrid[0], td = e.target;
        var scb = $(td).hasClass("cbox");
        var ptr = $(td).parents("tr.jqgrow");
        if (!ptr.length || (td.tagName == 'INPUT' && !scb) || td.tagName == 'A') {
            return true;
        }
        var sel = mygrid.getGridParam('selarrrow');
        var sid = ptr[0].id;
        var selected = $.inArray(sid, sel) >= 0;
        if (e.ctrlKey || (scb && (selected || !e.shiftKey))) {
            mygrid.setSelection(false,true,ptr);
        } else {
            if (e.shiftKey) {
                var six = mygrid.getInd( sid);
                var min = six, max = six;
                $.each(sel, function() {
                var ix = mygrid.getInd( this);
                if (ix < min) min = ix;
                if (ix > max) max = ix;
                });
                while (min <= max) {
                    var row = ts.rows[min++];
                    var rid = row.id;
                    if (rid != sid && $.inArray(rid, sel)<0) {
                        mygrid.setSelection( false, false, $(row));
                    }
                }
            } else if (!selected) {
                mygrid.resetSelection();
            }
            if (!selected) {
                mygrid.setSelection( false, true, ptr);
            } else {
                var osr = mygrid.getGridParam('onSelectRow');
                if ($.isFunction(osr)) {
                    osr(sid, true);
                }
            }
        }
    }

Answer 1

I solved my own problem, trial-and-error, by replacing the beforeSelectRow function with:

        beforeSelectRow: function(rowid, e){
                var grid = $('#grid');
                if(e.ctrlKey){
                    grid.jqGrid('setGridParam', {multikey: 'ctrlKey'});
                }else if(e.shiftKey){
                    grid.jqGrid('setGridParam', {multikey: 'shiftKey'});                    
                    var rowIds = grid.jqGrid('getGridParam','selarrrow');
                    //rowIds.sort(function(a, b) { return a - b }); //this is the magic line which sort the array
                    var iHi = Math.max.apply(Math,rowIds); // 3
                    var iLow = Math.min.apply(Math,rowIds);
                    var iStart = (rowid > iHi ? iHi : (rowid > iLow ? iLow : rowId));
                    var iEnd = (rowid > iHi ? rowid : (rowid > iLow ? rowid : iLow));
                    var allIds = grid.jqGrid('getDataIDs');
                    //var msg = "rowid: "+rowid+"; rowIds: " + rowIds.join(", ")+"; iLow: "+iLow+"; iHi: "+iHi+"; iStart: "+iStart+"; iEnd: "+iEnd+"; allIds["+allIds.length+"]: ";
                    grid.jqGrid('resetSelection');
                    for (var i=0; i < allIds.length; i++){
                        var id = parseInt(allIds[i]); 
                        var bSel = ((id >= iStart && id <= iEnd) && id != rowid);
                        if(bSel){
                            msg += ", ["+i+"]:"+allIds[i]+"("+bSel+")";
                            grid.jqGrid('setSelection',allIds[i], bSel);
                        }
                        if(id > iEnd)
                            break;
                    }
                    //alert(msg);

                }else{
                    grid.jqGrid('setGridParam', {multikey: ''});
                }

                return true; 
            }