jQgrid: multiselect true - make each row checked by default on page load

Question

jQuery("#grid").jqGrid({
    url:call_url,
        datatype: "json",
    height: 'auto',
    rowNum: 20,
    rowList: [20,30,40],
    colNames:[<?php echo $col;?>],
    colModel:[
                {name:'USER_ID',index:'USER_ID', align:'center',search:false,hidden:true,key:true},
        {name:'PROJECT_NAME',index:'PROJECT_NAME', align:'center',search:false,hidden: true},
        {name:'EMP_NAME',index:'EMP_NAME', sortable:true,summaryType:'count',summaryTpl : 'Total ({0}) Resource Hours' },
        <?php for($i=1;$i<=count($cal_arr);$i++) {?>
        {name:'<?php echo $i;?>',index:'<?php echo $i;?>',search:false,align:"center",sortable:false ,width:80 },
        <?php } ?>
    ],
    pager: "#page",
        multiselect: true,
    shrinkToFit :true,
    autowidth: true,
    viewrecords: true,
    grouping: true, 
    groupingView : { groupField : ['PROJECT_NAME'], 
                    groupColumnShow : [false], 
                    groupText : ['<b>{0}</b>'],
                    groupCollapse : false, 
                    groupOrder: ['asc'], 
                    groupSummary : [true], 
                    showSummaryOnHide: true,
                    groupDataSorted : true },
    sortname: 'EMP_NAME',
    caption: "Programatically block selection of some grid row',
    gridComplete: function () {
                    var recs = $("#grid").getGridParam("records");
                    $( ".mycontent" ).remove();
                    if (recs == 0 || recs == null) {
                        $('#grid').after("<div class='mycontent' style='color:red;text-align:center'>No Record Found</div>");
                        $("#btn_submit").hide();
                    }
            },


        loadComplete: function () {
            $("#cb_grid").click(); 
        },

            rowattr: function (item) {
                    if (parseInt(item.ID) == 1) {
                        return {"class": "ui-state-disabled ui-jqgrid-disablePointerEvents"};
                    }
            },

            //prevent selection of disabled rows
            beforeSelectRow: function (rowid, e) {
                if ($(e.target).closest("tr.jqgrow").hasClass("ui-state-disabled")) {
                    return false;   // not allow select the row
                }
                return true;    // allow select the row
            }

})

Above code does this

Required is

Using jqGrid with multiselect:true how to set each row checked by default on page load ? jQgrid Version - 4.6

Varix

Please include always which jqGrid fork and which version of jqGrid you use. Different versions have different possibilities. If you use still jqGrid 4.6 for example, then you can load all data selected if datatype: "local", deselectAfterSort: false, multiselect: true and selarrrow array are filled with ids of rows which need be selected during loading. – Forenoon

@Oleg, in my case its datatype: "json", and multiselect: true. How can I fetch ids of rows and keep it selected by default on page load for the first time ? – Varix

Answer 1

If you use jqGrid 4.6 with datatype: "json" and no loadonce: true option then you have not so much possibilities. You have to enumerate all multiselect checkboxes of the grid and select there. So you can do

$("#cb_grid").click(); // "grid" is the grid id

inside of loadComplete callback for example. If you would think about all cases you will probably add more additional criteria, because loadComplete will be called on sorting, paging and so on.

UPDATED: You code have $('.cbox').attr('checked', true); line inside of rowattr. In the way you don't change the checkbox of the row, which is not yet exist. Instead of that you set checked attribute with wrong value true instead of "checked" on the checkbox of the column header. You should remove the line to be able to use the code which I suggested you:

loadComplete: function () {
    $("#cb_" + this.id).click();
},
rowattr: function (item, rd, rowid) {
    //$('.cbox').attr('checked', true);
    if (parseInt(rowid) === 10) {
        return {"class": "ui-state-disabled ui-jqgrid-disablePointerEvents"};
    }
},
beforeSelectRow: function (rowid, e) {
    if ($(e.target).closest("tr.jqgrow").hasClass("ui-state-disabled")) {
        return false;   // not allow select the row
    }
    return true;    // allow select the row
}

see the demo: http://jsfiddle.net/OlegKi/aagxejj5/4/

Forenoon

Oleg: I replaced my code with your fiddle code and still it does not select all the checkbox of the row but only cb_grid. The code responsible to keep all rows selected is loadComplete: function () { $("#cb_" + this.id).click(); } but unfortunately its not working for me – Varix

@Slimshadddyyy: I posted you the demo which works. So the problem which you describes is not some common jqGrid proble, but the problem in your specific code. You can modify the demo jsfiddle.net/OlegKi/aagxejj5/1 so that it reproduces the problem, save it and post me the URL. Only having the demo which not work I can help you. – Forenoon

Pls find the fiddle jsfiddle.net/aagxejj5/25. I have added my complete code with your fiddle. Specifc code is followed by loadComplete. – Varix

@Slimshadddyyy: You demo don't display anything because of syntax error. After replacing "<?php echo SITE_URL."someValidUrl"?>" to new_call_url ="<?php echo SITE_URL.'someValidUrl'?>"; to new_call_url ="someValidUrl" it works like expected without any problem: jsfiddle.net/OlegKi/aagxejj5/26 – Forenoon

Your code seems correct but I can not figure out the issue why its not working for me. I am really bothering you from last few hours. appreciate your genuine help. accepting your answer. – Varix

You are welcome! Such problems are really easy to debug, but one need to have the demo. Do you verified that loadComplete callback will be called? (you can just insert alert("OK"); inside). The code which you posted contains some syntax errors: caption: "Programatically block selection of some grid row', instead of caption: "Programatically block selection of some grid row", (wrong closing quote). If you have the same in your real code then it could be the reason that some options/callbacks not works. – Forenoon

@Slimshadddyyy: Another common remark. I see that you used voting only 62 times in 2 years, 3 months. Do you seen so seldom helpful information on stackoverflow? You have right to vote 30 questions or answers per day (see here). Stackoverflow and google use the voting counter as the main criteria for ordering of search results. Only if real developers found some answer helpful then it will be easy found. So if you want help other people to find helpful information of stackoverflow you should more use your voting right. – Forenoon

Oleg: Checked and loadComplete is being called. Also real code does not have any syntax errors as I rectified. Could be some other issue which I need to figure out. Yes I ll use my voting rights generously now – Varix

@Slimshadddyyy: Do you verified that the rows will selected if you click on "#cb_grid" (checkbox of top of multiselect column) manually? Which web browser you use for debugging? You can for example set breakpoint inside of loadComplete and verify thet $("#cb_" + this.id).length is 1. Which version of jQuery you use? If it is not so old the you can add in Watch window $._data($("#cb_" + this.id)[0], "events") to see that click is bound to the event. You can post new comment after you verified all that. – Forenoon

@Slimshadddyyy: You should use jquery.jqGrid.src.js instead of jquery.jqGrid.min.js and set the breakpoint on the line and to go some steps over to see that the line will be executed for every line of your grid. – Forenoon

Oleg: verfied $("#cb_" + this.id).length and its 1. Also rows will be selected if I click on #cb_grid ((checkbox of top of multiselect column)). I can make it work with loadComplete: function () { $("#cb_" + this.id).click(); //enable checkbox on top of multiselect column $('input.cbox').prop('checked',true); //enable other checkboxes $("tr.jqgrow").addClass('ui-state-highlight'); //highlight row } – Varix

I have to click twice to uncheck other check boxes. – Demetrademetre