How can I get checked row ids?

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...

score 1 · Answer 1 · answered Aug 14 '12 at 10:33

You don't have to add the checkbox column manually. Here's how I do it:

Specify the editurl and multiselect options:

$("#UsersGrid").jqGrid({
  // The grid will send modification data to this url
  //     
  editurl: "url which will handle the edit/delete operations",
  // This ensures there will be a checkbox column in your grid
  //
  multiselect: true,
  ...
});

Provide a handler for the modification operations (responding to the editurl requests). In my case, it is an action method with this signature:

public ActionResult EditItems(string id, string oper, string source, string target)
{
    // id: list of IDs of the selected items (e.g. "1234,5678")
    // oper: the requested operation ("edit" or "del", if you use the standard ones)
    // source, target: in case of the "edit" operation, these are the new values of the respective columns. I.e. these parameters are model-specific (I have "source" and "target" columns in my grid)
}

thanks a lot, but what is ActionResult?!, This is an ASP.Net App... — YMELS, Aug 14 '12 at 13:10
Action Result - http://msdn.microsoft.com/en-us/library/system.web.mvc.actionresult.aspx. Part of ASP.NET's MVC related classes. — StingyJack, Aug 14 '12 at 13:17
I see. That's MVC-specific. I am not familiar with pure ASP.NET, but surely you have a way there to define a function which responds to your `editurl` and accepts the required `id` and `oper` parameters? — twoflower, Aug 14 '12 at 13:19

Piyush Sardana · Accepted Answer · 2012-08-14T13:30:03.470

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.

add one button to your html like this

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

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.

Thanks a lot, I understood all this, except: What is 'ActionResult'?! — YMELS, Aug 14 '12 at 13:04
Oh it's when you use asp.net mvc, you can specify your return type here.. — Piyush Sardana, Aug 14 '12 at 13:20
that's what i said, when you use asp.net you can specify different return type here. — Piyush Sardana, Aug 14 '12 at 14:15
Ok, I tried something else, but still using your Button Code, but I get an error that 'getCellValue' is not defined....!!! — YMELS, Aug 14 '12 at 14:23
there are other ways also to get the row data having row id with you.One is to use var row = jQuery("#grid").jqGrid('getGridParam', selRowIds[i]); and then var Module= row.Module. Please look into documentation. — Piyush Sardana, Aug 14 '12 at 15:53

How can I get checked row ids?

2 Answers2

Linked