Reading the Selected Row data in grid to the Controller using ajax call

[Jeremy]

Hi,

I have a grid structured with few columns and a column with checkbox using client template method.
Now i want to read the row values that are selected on an button action click and that has to be passed to the controller for processing the data. 

I have mentioned my grid structure below
 @(Html.Kendo().Grid<MyMVC.Models.MyModel>()
    .Name("MyGrid")
    .Columns(columns =>
    {
        columns.Bound("").Width(25).ClientTemplate("<input type='checkbox' checked='checked' id='rowcheck'  ></input>"); -- CheckBox in grid
        columns.Bound(p => p.LeaveDate)
        columns.Bound(p => p.start);
        columns.Bound(p => p.end);
        columns.Bound(p => p.reason).Width(400);
    })

     .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetLeaveGridData", "StaffManagment"))
        .ServerOperation(false)

    )
  .Selectable(s => s.Mode(GridSelectionMode.Multiple))  
  .HtmlAttributes(new { @style = "font-family:calibri; font-size:12px" })
   .Scrollable()
)

I have done the coding for selecting the key column leave date using the jquery, but i want remining column data to be passed to the controller. 
Can anyone help me out how to achieve this. Is this possible or we have to go with some other methodology. 

Note : The selected row mentions the row which are checked by the user in the checkbox column.

Thanks
M.Mayilsamy
On Behalf of Jeremy

[Alexander Popov]

Hello Jeremy,

I am not sure I understand you correctly, but in case you want to use checkboxes for selecting Grid rows I would recommend you this example project from our Code Library. After the user selected one or more rows (using the checkboxes) and clicks the "Process" (for example) button you could use the following approach to get the selected rows and pass them to the controller:  

function () {
     var grid = $("#grid").data("kendoGrid");
     var checked = [];
     var dataItems = [];
     for(var i in checkedIds){
         if(checkedIds[i]){
             checked.push(i);
             dataItems.push(grid.dataItem("tr:eq("+ i +")"));
         }
     }
     //use ajax request to send the data of the selected items
     $.ajax({
          type: "POST",
          url: "Some/Controller",
          data: dataItems
      })
      .done(function (data) {
          //do something with the response if necessary
      });
 });

If the above example does not answer your question or I misunderstood, please provide additional information so we can advice you further.

Regards,
Alexander Popov
Telerik

[Prashant]

Hi Alex,

I tried the same way as you suggested and I get a telerik script error when I post the data.

 0x800a138f - JavaScript runtime error: Unable to get property 'field' of undefined or null reference

 and this happens at the following line of code  'e' is returned as undefined: 

i.trigger(yt,{field:e.field,node:e.node,index:e.index,items:e.items||[this],action:e.node?e.action||"itemloaded":"itemchange"})})),e},

 FYI , I use  Kendo UI v2015.1.429 version.

Any help is appreciated.

[Dimiter Madjarov]

Hello Prashant,

We cannot state for sure what is causing the problem, without inspecting the sample code. Please send us small isolated runnable example in which the issue is reproduced, so we could assist further.

Regards,
Dimiter Madjarov
Telerik

 

 

[Prashant]

Hi Dimiter,

The name was just a sample one.

However, I was able to solve the issue by using the telerik's internal function $('#GridName').data("kendoGrid").dataSource().sync();

Thank You.

Regards,
Prashant.