How to put the option to mark all Checkbox in Jqgrid

Question

I need to put the Mark and Deselect option on all checkboxes listed by JQGRID

I can’t imagine how to do it. Below the JS table.

var grid = $("#jqGrid").jqGrid({
        url: '/Expedicao/Minuta/CarregaTransportadorNotas',
        datatype: 'json',
        mtype: 'GET',  
        postData: {
                  transportador: function () { return jQuery("#transportador").val(); }
        }, 
        colModel: [
             {name: "Escolher",width: 70, align: "center",
              formatter: "checkbox", formatoptions: { disabled: false},
              edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
            stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
            { label: 'Codigo', name: 'doc', width: 250 },         
            { label: 'Série', name: 'serie', width: 180},         

        ],

        viewrecords: true,
            rowNum: 20,
            rowList: [20, 40, 100],
            height: "auto",
            //height: 400,
            emptyrecords: "Nenhuma Minuta ...",
            loadtext: "Buscando e carregando...",
            //rowNum: 20,
            pager: "#jqGridPager",
            loadonce: true

    });

    $("#jqGrid").jqGrid('navGrid', 'jqGridPager', { edit: false, add: false, del: false })

Answer 1

Create a <input type="checkbox" id="selAll"> Selecionar tudo out of the table (you can put it above the table. You can format it any way you want):

<input type="checkbox" id="selAll"> Selecionar tudo
<br>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>

Will look something like this:

And insert two events into the script to get the clicks on checkboxs that will make the control, capturing the checkboxes of the table by class table.ui-jqgrid-htable, which is the class generated by the plugin:

$(":checkbox", "table.ui-jqgrid-htable").click(function(){

   if(!$(this).is(":checked")) $("#selAll").prop("checked", false);

   var cbs = $(":checkbox", "table.ui-jqgrid-htable");
   var allchkd = true;

   for(var x=0; x<cbs.length; x++){
      if(!$(cbs[x]).is(":checked")){
         allchkd = false;
         break;
      }
   }

   if(allchkd) $("#selAll").prop("checked", true );

});

$("#selAll").click(function(){
   var boxes = $(":checkbox", "table.ui-jqgrid-htable"); // pega os checkboxes da tabela
   boxes.prop("checked", $(this).is(":checked"));
});

Answer 2

I got it in a very simple way using multiselect: true,

var grid = $("#jqGrid").jqGrid({
        url: '/Expedicao/Minuta/CarregaTransportadorNotas',
        datatype: 'json',
        mtype: 'GET',  
        postData: {
                    transportador: function () { return jQuery("#transportador").val(); }
        }, 
        colModel: [          
                    { label: 'Codigo', name:'doc', width:50 },         
                    { label: 'Série', name:'serie', width:50 },                     
                 ],

                loadonce: true,
                viewrecords: true,
                width: 780,
                height: 200,
                rowNum: 20,
                rowList : [20,30,50],
                rownumbers: true, 
                rownumWidth: 25, 
                multiselect: true,
                pager: "#jqGridPager"

    });



$("#jqGrid").jqGrid('navGrid', 'jqGridPager', { edit: false, add: false, del: false })