jqGrid CTRL and SHIFT multi select

jqGrid CTRL and SHIFT multi select

by Manish Kumar Choudhary

HTML

<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery.ui.all.css">
<p class="ui-widget">
Please use CTRL and SHIFT key for multiple selection    
</p>

<table id="grid"></table>

CSS

.ui-state-highlight{
    border:none!important;  
    color: #FF0000!important;
}

JavaScript

// dummy items
var listitems= [
    { id: "1", Name: "Harry" },
    { id: "2", Name: "Sally" },
    { id: "3", Name: "Donald" },
    { id: "4", Name: "Daisy"}, 
    { id: "5", Name: "Mickey" }, 
    { id: "6", Name: "Minny" }];

// handle jqGrid multiselect => thanks to solution from Byron Cobb on http://goo.gl/UvGku
var handleMultiSelect = function (rowid, e) {
    var grid = $(this);
    if (!e.ctrlKey && !e.shiftKey) {
        grid.jqGrid('resetSelection');
    }
    else if (e.shiftKey) {
        var initialRowSelect = grid.jqGrid('getGridParam', 'selrow');

        grid.jqGrid('resetSelection');

        var CurrentSelectIndex = grid.jqGrid('getInd', rowid);
        var InitialSelectIndex = grid.jqGrid('getInd', initialRowSelect);
        var startID = "";
        var endID = "";
        if (CurrentSelectIndex > InitialSelectIndex) {
            startID = initialRowSelect;
            endID = rowid;
        }
        else {
            startID = rowid;
            endID = initialRowSelect;
        }
        var shouldSelectRow = false;
        $.each(grid.getDataIDs(), function (_, id) {
            if ((shouldSelectRow = id == startID || shouldSelectRow)) {
                grid.jqGrid('setSelection', id, false);
            }
            return id != endID;
        });
    }
    return true;
};

$(function() {
  // initialize jqGrid  with dummy list
  $("#grid").jqGrid({
                data: listitems,
                datatype: "local",
                colNames: ['Name'],
                colModel: [{ name: 'Name', index: 'Name', width: 300}],
                rowNum: listitems.length,                        
                hidegrid: false,
                height: 300,
                multiselect: true,
                caption: "Names",
                beforeSelectRow: handleMultiSelect // handle multi select
            }).jqGrid('hideCol', 'cb');
});