Sending the Selected Grid Rows to the Controller
Environment
| Product Version | 2022.3.913 |
| Product | Telerik UI for ASP.NET MVC Grid |
Description
How can I get the selected rows in the Telerik UI for ASP.NET MVC Grid and send them through an AJAX request to the server?
Solution
- Create a button and handle its
clickevent. - Use the client-side
select()method to get the selected row elements. - Iterate through the selected rows, retrieve the respective data item through the
dataItem()method of the Grid, and store it in an arrayselectedDataItems. - Convert the data items into strings by using the
JSON.stringify()method. - Perform an asynchronous HTTP (Ajax) request to the server.
- Access the received data on the server.
@(Html.Kendo().Button()
.Name("sendDataBtn")
.Content("Submit selected Grid rows to the server")
.HtmlAttributes(new { type = "button" })
.Events(ev => ev.Click("onClick"))
)
@(Html.Kendo().Grid<GridModel>()
.Name("grid")
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
//Other configuration
)
function onClick() {
var grid = $("#grid").data("kendoGrid");
var selectedDataItems = [];
var selectedRows = grid.select();
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = grid.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
}
var rows = JSON.stringify(selectedDataItems);
$.ajax({
url: '@Url.Action("GetSelectedRows","Grid")',
data: rows,
dataType: "json",
type: "POST",
contentType: 'application/json;'
});
}
public ActionResult GetSelectedRows([FromBody] List<GridModel> rows)
{
List<GridModel> selecteditems = rows;
...
}