jqgrid multiselect only use multiselect box

Question

I want selection of the row only using multiselect box not by click on the row.I read this answer but onSelectRow not fired.In my app when click on row,some data show(master and details struct) but because onSelectRow not fired. I want select row by click and show data but check box set only click on box.Please help me :(

 grid.jqGrid({
            url: 'jqGridHandler.ashx',
            datatype: 'json',
            width: $("#parentDiv").width(),
            height: a,
            direction: "rtl",
            colNames: ['Action', 'A', 'W', 'Date', 'Num', 'Sender', 'F', 'EOSysNum', 'PctIndNum', 'Subject', 'PctAssignSubject', 'PctAssignType', '', 'Date2', 'Assign', '', 'PctTabName', 'Andicator', '', 'Datetime of Show', 'SysCode', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '','','','','','','','','',''],
            colModel: [
                {
                    name: 'act',
                    width: ($.browser.webkit ? 25 : 25),
                    align: 'center',
                    sortable: false,
                    formatter: 'actions',
                    formatoptions: {
                        keys: true,
                        delOptions: myDelOptions,
                        delbutton: false,
                        editbutton: false
                    }
                },
                {
                    name: 'IsAttach',
                    width: 5,
                    sortable: false,
                    search: false,
                    template: ActionTemplate,
                    formatter: function (cellval, opts, rowObject, action) {

                        return (cellval == 'True' ? "<span  class='ui-icon icon-Attachment' style='float:left'></span>" : "");
                    }
                },
                {
                    name: 'IsContent',
                    width: 6,
                    sortable: false,
                    search: false,
                    template: ActionTemplate,
                    formatter: function (cellval, opts, rowObject, action) {
                        return (cellval == 'True' ? "<span class='ui-icon icon-Word' style='float:left'></span>" : "");
                    }
                },
                {
                    name: 'PctLettDate',
                    width: 30,
                    sortable: true,
                    template: CenterTemplate,
                  //  formatter: function (cellvalue, options, rowObject) {
                        //return (rowObject["PctViewDate"] == '' ? '<font  style="font-weight:bold">' + cellvalue + '</font>' : cellvalue)
                       // return (rowObject["PctViewDate"] == '' ? '<font  style="font-weight:bold">' + cellvalue + '</font>' : cellvalue);
                    //}
                },
                {
                    name: 'PctLettNum',
                    width: 30,
                    sortable: true,
                   // template: numberTemplate,
                   // formatter: function (cellvalue, options, rowObject) {
                       // return (rowObject["PctViewDate"] == '' ? '<font  style="font-weight:bold">' + cellvalue + '</font>' : cellvalue);
                   // }
                },
                {
                    name: 'PctAssignPrs',
                    width: 80,
                    sortable: true,
                   // formatter: function (cellvalue, options, rowObject) {
                     //   return (rowObject["PctViewDate"] == '' ? '<font  style="font-weight:bold">' + cellvalue + '</font>' : cellvalue)
                    //}
                },
                {
                    name: 'PctAssignImi',
                    width: 15,
                    sortable: true,
                    template: CenterTemplate,
                  //  formatter: function (cellvalue, options, rowObject) {
                     //   return (rowObject["PctViewDate"] == '' ? '<font  style="font-weight:bold">' + cellvalue + '</font>' : cellvalue)
                    //}
                },
                { name: 'EOSysNum', width: 30, sortable: true, hidden: true },
                { name: 'PctIndNum', width: 140, sortable: false, hidden: true },
                {
                    name: 'PctLettSubject',
                    width: 140,
                    sortable: true,
                   // formatter: function (cellvalue, options, rowObject) {
                        //return (rowObject["PctViewDate"] == '' ? '<font size="3" color="#0072C6" style="font-weight:bold">' + cellvalue + '</font>' : cellvalue)
                    //}
                },
                { name: 'PctAssignSubject', width: 100, sortable: false, hidden: true },
                { name: 'PctAssignType', width: 100, sortable: false, hidden: true },
                { name: 'PctType', width: 100, sortable: false, hidden: true },
                { name: 'PctStartDate', width: 100, sortable: true, hidden: true },
                { name: 'PctRecDate', width: 100, sortable: true, hidden: true },
                { name: 'PctAssignDate', width: 100, sortable: true, hidden: true },
                { name: 'PctAssignTime', width: 100, sortable: true, hidden: true },
                { name: 'PctTabName', width: 100, sortable: true, hidden: true },
                { name: 'PctIndCode', width: 100, sortable: true, hidden: true },
                { name: 'PctViewDate', width: 100, sortable: true, hidden: true },
                { name: 'PctViewTime', width: 100, sortable: true, hidden: true },
                { name: 'SysCode', width: 100, sortable: true, hidden: true },
                { name: 'PctIsTerminate', width: 100, sortable: true, hidden: true },
                { name: 'PctIsConfirm', width: 100, sortable: true, hidden: true },
                { name: 'PctAssignerSysNum', width: 100, sortable: true, hidden: true },
                { name: 'pctAssignmentNum', width: 100, sortable: true, hidden: true },
                { name: 'PctAssignPrivate', width: 100, sortable: true, hidden: true },
                { name: 'PctIsInFolder', width: 100, sortable: true, hidden: true },
                { name: 'PctAssignPhysics', width: 100, sortable: true, hidden: true },
                { name: 'PctConfirmRecLettPhysics', width: 100, sortable: true, hidden: true },
                { name: 'pctAssignmentPhysicsNum', width: 100, sortable: true, hidden: true },
                { name: 'PctDeputyEOSysNum', width: 100, sortable: true, hidden: true },
                { name: 'PctDeputySysCode', width: 100, sortable: true, hidden: true },
                { name: 'PctRequestStatus', width: 100, sortable: true, hidden: true },
                { name: 'PctIsTerminateByAssign', width: 100, sortable: true, hidden: true },
                { name: 'PctPosSysCode', width: 100, sortable: true, hidden: true },
                { name: 'PctAssignerPosSysCode', width: 100, sortable: true, hidden: true },
                { name: 'PctTabName1', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessAssignLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessContentLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessAttachLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessCCLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessPhysicsLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessFoldersLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessDocRelatedLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessTreeLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessEmailLetter', width: 100, sortable: true, hidden: true },
                { name: 'AssignedPerson', width: 100, sortable: true, hidden: true }
            ],
            rowNum: 20,
            loadonce: true,
            rowList: [5, 10, 20],
            recordpos: "left",
            ignoreCase: true,
            toppager: true,
            viewrecords: true,
            multiselect: true,
            sortorder: "desc",
            scrollOffset: 1,
            editurl: 'clientArray',
          multiboxonly: true,
            jsonReader:
            {
                repeatitems: false,
            },
            gridview: true,
            rowattr: function (rd) {

                return { "class": (rd["PctViewDate"] == '') ? "myRowClassNoRead" : "myRowClass" };

            },
            ondblClickRow: function (id) {

                $(this).jqGrid('editRow', id, true, null, null, 'clientArray');
            },
            onSelectRow: function (id) {
                rowData = jQuery(this).getRowData(id);
                window.selectedRow = id,
                doShowInformationOfSelectedRow(rowData, window.activeTab);
                if (id && id !== lastSel) {
                    if (typeof lastSel !== "undefined") {
                        $(this).jqGrid('restoreRow', lastSel);
                    }
                    lastSel = id;
                }
            },
            beforeSelectRow: function(rowid, e) {
                var cbsdis = $("tr#" + rowid + ".jqgrow > td > input.cbox:disabled", grid);
                if (cbsdis.length === 0) {
                i = grid.getCellIndex($(e.target).closest('td')[0]),
                cm = grid.jqGrid('getGridParam', 'colModel');
                return (cm[i].name === 'cb');
                    return true;    // allow select the row
                } else {
                    return false;   // not allow select the row
                }

            },
            onSelectAll: function(aRowids, status) {
                if (status) {
                    // uncheck "protected" rows
                    var cbs = $("tr.jqgrow > td > input.cbox:disabled", grid[0]);
                    cbs.removeAttr("checked");

                    //modify the selarrrow parameter
                    //grid[0].p.selarrrow = grid.find("tr.jqgrow:has(td > input.cbox:checked)")
                        //.map(function() { return this.id; }) // convert to set of ids
                        //.get(); // convert to instance of Array
                }
            },

            loadComplete: function () {

                $('#navGridfrom').datepicker({
                    isRTL: true,
                    onSelect: function (dateText, inst) {
                        $('#navGridto').datepicker('option', 'minDate', new JalaliDate(inst['selectedYear'], inst['selectedMonth'], inst['selectedDay']));
                    }
                });
                $("#navGridto").datepicker();
                var iCol = getColumnIndexByName(grid, 'act');
                var iColhasAccessAssignLetterIndex = getColumnIndexByName(grid, 'HasAccessAssignLetter');
                var iColhasAccessFoldersLetterIndex = getColumnIndexByName(grid, 'HasAccessFoldersLetter');
                $(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")
                    .each(function () {
                        var valueAccessAssignLetter = this.parentElement.cells[iColhasAccessAssignLetterIndex].innerHTML;
                        var valueAccessFoldersLetter = this.parentElement.cells[iColhasAccessFoldersLetterIndex].innerHTML;
                        $(this.parentElement).find("td > input.cbox").attr("disabled",(valueAccessFoldersLetter=="False"? true:false));
                        $("<div>", {
                                title: "Archive",
                                mouseover: function () {
                                    $(this).addClass(valueAccessFoldersLetter == "True" ? 'ui-state-hover':'');
                                },
                                mouseout: function () {
                                    $(this).removeClass('ui-state-hover');
                                },
                                click: function (e) {
                                    if (valueAccessFoldersLetter == "True") {
                                        alert("'Custom' button is clicked in the rowis=" +
                                            $(e.target).closest("tr.jqgrow").attr("id") + " !");
                                    }
                                }
                            }
                        ).css({ "margin-right": "5px", "float": "left", "cursor": "pointer" })
                            .addClass(valueAccessFoldersLetter == "True" ? "ui-pg-div ui-inline-custom":"")
                            .append(valueAccessFoldersLetter == "True" ? '<span class="ui-icon icon-archive "></span>' : '<span class="ui-icon icon-archive ui-state-disabled">')
                            .prependTo($(this).children("div"));

                        $("<div>", {
                                title: "Assign",
                                mouseover: function () {
                                    $(this).addClass(valueAccessAssignLetter == "True" ?'ui-state-hover':'');
                                },
                                mouseout: function () {
                                    $(this).removeClass(valueAccessAssignLetter == "True" ?'ui-state-hover':'');
                                },
                                click: function(e) {
                                    if (valueAccessAssignLetter == "True") {
                                        alert("'Custom' button is clicked in the rowis=" +
                                            $(e.target).closest("tr.jqgrow").attr("id") + " !");
                                    }
                                }                                    
                            }
                        ).css({ "margin-right": "10px", "float": "left", cursor: "pointer" })
                            //.addClass("ui-pg-div ui-inline-custom")
                            .append(valueAccessAssignLetter == "True" ? '<span  class="ui-icon icon-refrence" disabled></span>' : '<span class="ui-icon icon-refrence ui-state-disabled"></span>')
                            .prependTo($(this).children("div"));
                    });
                $("tr.jqgrow", this).contextMenu('myMenu1', {
                    direction: 'rtl',
                    bindings: {
                        'edit': function (trigger) {
                            // trigger is the DOM element ("tr.jqgrow") which are triggered
                            grid.editGridRow(trigger.id, editSettings);
                        },
                        'add': function (/*trigger*/) {
                            grid.editGridRow("new", addSettings);
                        },
                        'del': function (trigger) {
                            if ($('#del').hasClass('ui-state-disabled') === false) {
                                // disabled item can do be choosed
                                grid.delGridRow(trigger.id, delSettings);
                            }
                        }
                    },
                    onContextMenu: function (event/*, menu*/) {
                        var rowId = $(event.target).closest("tr.jqgrow").attr("id");
                        //grid.setSelection(rowId);
                        // disable menu for rows with even rowids
                        $('#del').attr("disabled", Number(rowId) % 2 === 0);
                        if (Number(rowId) % 2 === 0) {
                            $('#del').attr("disabled", "disabled").addClass('ui-state-disabled');
                        } else {
                            $('#del').removeAttr("disabled").removeClass('ui-state-disabled');
                        }
                        return true;
                    }
                });
            },

My [old answer](http://stackoverflow.com/a/7635601/315935) which you referenced uses `beforeSelectRow` instead of `onSelectRow`. Is `beforeSelectRow` not fired in your grid? Could you provide a code which demonstrate the problem? — Oleg, Jun 11 '13 at 07:58
Thank you for your quick answer :).beforeSelectRow is fire but onSelectRow not fire.in onSelectRow show data base on row selecected.I edit my question and add some code — ZSH, Jun 11 '13 at 08:11
If `beforeSelectRow` ends with `return false` then no selection of the row take place and `onSelectRow` not fire. Moreover I don't see why you need use both `beforeSelectRow` and `onSelectRow`. — Oleg, Jun 11 '13 at 08:16
I use onSelectRow for show data base on selected row and use beforeSelectRow for when some of rows should not select by multielect box(disable multielect box of row base on condition) — ZSH, Jun 11 '13 at 08:21
For disable of multiselect box i use [your answer](http://stackoverflow.com/questions/5259262/jqgrid-multiselect-and-disable-check-conditional) — ZSH, Jun 11 '13 at 08:26
I still don't understand why you can't move the code on `onSelectRow` inside of `beforeSelectRow`? You current code seems me strange because of many reasons. For example `loadComplete` contains code which do something in columns `act` and `iCol2` which are not defined in `colModel`, you set boolean value of `"disabled"` attribute instead of setting string `"disabled"`. You examine **HTML** code of column and it's not clear how the code come in grid. If you place HTML fragments in grid data some selects of rows will not been done. — Oleg, Jun 11 '13 at 08:26
[The answer](http://stackoverflow.com/questions/5259262/jqgrid-multiselect-and-disable-check-conditional) is more as 2 years old. I fixed value of `"disabled"` attribute in the answer. Other my questions are still opened. I think that you should better use `beforeSelectRow` instead of `onSelectRow` in your case. — Oleg, Jun 11 '13 at 08:32

score 3 · Accepted Answer · edited May 23 '17 at 11:49

The requirement

I want select row by click and show data but check box set only click on box

contradicts with the meaning of multiselect: true option in jqGrid. You can change behavior of selection. For example you can select rows by click on multiselect checkbox only. What you want is selection of rows without checking of multiselect checkbox. The requirement contradicts with the meaning of multiselect: true option.

If you need some chechboxes in your grid which will be checked based on your custom algorithm you can include column with formatter: "checkbox", formatoptions: { disabled: false }.

I recommend you to move code from your onSelectRow callback inside of beforeSelectRow callback.

Additionally I would recommend you to reduce the number of hidden columns which you use. It I calculated correctly you have 40 (!!!) hidden columns and only 8 visible columns in the grid. Every hidden column take place on DOM of the page and makes working with the grid slowly. What you need is just having object with all properties which represent the row. Usage of JavaScript variables is much quickly for the purpose as the usage of hidden columns. One can do this in many way. For example one can fill userdata inside of beforeProcessing with full data which represent the items in almost the same way like in the answer.

UPDATED: If for example you use jsonReader: { repeatitems: false } and the column syscode contains unique id of you data then you should

include key: true property in definition of the syscode column or use jsonReader: { repeatitems: false, id: "syscode" }. I recommend to make both.
include beforeProcessing callback which fill userdata property in the server response. For example

beforeProcessing: function (data) {
    var rows = data.rows, l = rows.length, i, item, itemBySysCode = {};
    for (i = 0; i < l; i++) {
        item = rows[i];
        if (item.syscode) {
            itemBySysCode[item.syscode] = item;
        }
    }
    data.userdata = itemBySysCode;
}

Now you can access remove all hidden rows from colModel and colNames. If you need full item object you should don't use getRowData method now (jQuery(this).getRowData(id)). The method you could use to get non-hidden properties only. To access hidden properties you can use $(this).jqGrid("getGridParam", "userData")[id]. In the case userData will get you original data loaded from the server and jQuery(this).getRowData(id) or $(this).jqGrid("getGridParam", "data") will get you current data after modification (your code contains local editing of data).

For reduce the number of hidden columns i can remove columns and use beforeProcessing (according to example) for save data in JavaScript variables(for example userdata).Do i understand correctly? — ZSH, Jun 11 '13 at 10:56
@ZSH: Exactly! You will have the grid with 8 columns only and use something like `jQuery(this).getGridParam("userData")[id]` instead of `jQuery(this).getRowData(id)`. I wanted to post you code example, but it was not clear how you specify `id` in your data. You don't use `key: true` for some column. Do you have additional `id` property in every item of data returned from the server? Could you include an example of data (2 rows) returned from the server? — Oleg, Jun 11 '13 at 12:00
Column 'syscode' is key and i use default key(row number).I set key to true for syscode.I fill 'userData' and jQuery(this).getGridParam("userData") its work but jQuery(this).getRowData(id) not work i also add syscode into userData — ZSH, Jun 11 '13 at 13:12
@ZSH: See **UPDATED** part of the answer for the code example. — Oleg, Jun 11 '13 at 14:08

jqgrid multiselect only use multiselect box

1 Answers1