Question

I’m using jqGrid, and I add a checkbox column, I want to be able to get checked rows so I can call the server with them…

My jqGrid Code:

<script type="text/javascript">
    $(function () {
        $("#UsersGrid").jqGrid({
            url: "Handler.ashx",
            datatype: 'json',
            height: '100%',
            width: '500',
            colNames: [' ', 'ref#', 'Module', 'TT#', 'AssignedOn', 'TrialNo'],
            colModel: [
                    { name: ' ', index: 'ChkBox', width: 16, sortable: false, editable: true, formatter: "checkbox", formatoptions: { disabled: false }, editable: true, edittype: "checkbox" },
                    { name: 'ref#', width: 50, sortable: true },
                    { name: 'Module', width: 50, sortable: true },
                    { name: 'TT#', width: 110, sortable: true },
                    { name: 'AssignedOn', width: 110, sortable: true },
                    { name: 'TrialNo', width: 50, sortable: true }
                ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#UsersGridPager',
            sortname: ' ',
            viewrecords: true,
            sortorder: 'asc'
            //caption: "Cases"
        });

        $("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', { edit: false, add: false, del: false });
</script>

Thanks in Advance…

Answer 1

You should better you multiselect:true, because the functionality i can see you are implementing with check boxes is to select multiple rows.

here’s how it will work for u.
1. Make multiselect:true in jqgrid Parameters.

1. add one button to your html like this

button type=”button” value=”submit” id=”clickMe” >Submit /button> //start and close the tags properly.

1. Now on the click event of this button, get the data of selected rows and make one ajax request to your server.

$(‘#clickMe’).click(function(){
var selRowIds = $(‘#grid’).jqGrid(‘getGridParam’, ‘selarrrow’);

if(selRowIds.length>0)
               {
                   for( var i=0;i<selRowIds.length;i++){
           var ref#=getCellValue(selRowIds[i],'ref#');
           var Module=getCellValue(selRowIds[i],'Module');
           var TT#=getCellValue(selRowIds[i],'TT#');


           var AssignedOn=getCellValue(selRowIds[i],'AssignedOn');
               var TrialNo=getCellValue(selRowIds[i],'TrialNo');

               $.ajax({
               type: 'POST',
               url: '@Url.Action("editMe")',
               contentType: 'application/json; charset=utf-8',
               data:JSON.stringify({ref#: ref#, Module:Module,TT#:TT#,AssignedOn:AssignedOn,TrialNo:TrialNo}),
               dataType: "json",
               success:function(){
               $('#grid').trigger("reloadGrid");
                },

                error: function () {
                       alert("error");
                    }
                }); 
                }
                }
           });

and your controller should look like this

 public ActionResult editMe(string ref#, string Module, string TT#, string AssignedOn, string TrialNo)
        {
          }

I’m assuming you have dataType for all the columns as string and they all are editable:true(you can mention this with colModal. So if only Module, AppliedOn is editable true, so you can get only these two values in button click. depending upon your need you can change the code.