New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Post Selected Grid Rows to Server
Environment
Product | Telerik UI for ASP.NET MVC Grid |
Product version | 2025.1.227 |
Description
How can I post the selected Grid rows to the server?
Solution
You can achieve this requirement using the following implementation:
-
Define the Grid and enable its selectable feature:
Razor@(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridSelectionByField.Models.Product>() .Name("grid") .Columns(columns => { columns.Bound(p => p.ProductName); columns.Bound(p => p.UnitPrice).Width(120).Format("{0:c}"); columns.Bound(p => p.UnitsInStock).Width(120); columns.Bound(p => p.Discontinued) .ClientTemplate(@"# if (Discontinued) { # <input type='checkbox' checked='checked' class='checkbox' /> # } else { # <input type='checkbox' class='checkbox' /> # } #") .HeaderTemplate("<input type='checkbox' class='checkAll' />").Width(120); }) .Selectable(s => s.Mode(GridSelectionMode.Multiple)) .Pageable(p => p.Responsive(false)) .Scrollable() .Filterable() .Events(ev => ev .DataBound("dataBound") .Change("changed") ) .HtmlAttributes(new { style = "height:550px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Model(model => model.Id(p => p.ProductID)) .Read(read => read.Action("Get_Products", "Home")) ) )
-
Add the custom JavaScript logic that processes and posts the selected rows:
JSvar allChecked = @Html.Raw(Json.Encode(Model)), bound = false; function changed(e) { if(!bound) { var grid = e.sender, selected = grid.select(), data= {productsList : []} selected.each(function(){ var dataItem = grid.dataItem(this), checked = $(this).find("input:checkbox").prop("checked"); data.productsList.push({ ProductId: dataItem.ProductID, ProductName: dataItem.ProductName, UnitPrice: dataItem.UnitPrice, UnitsInStock: dataItem.UnitsInStock, Discontinued: !checked }) }); updateData(grid, data); } } function dataBound(e) { bound = true; var rows = this.tbody.find("tr"); var grid = e.sender; rows.each(function () { var row = $(this); if (row.find("input[checked='checked']").length > 0) { grid.select(row); } }); bound = false; } function updateData(grid, data){ $.ajax({ url: '@Url.Action("Select_Products", "Home")', data: data, type: "POST", success: function (res) { checkHeader(res); grid.dataSource.fetch(); } }); } function checkHeader(res) { if(res) { grid.thead.find(".checkAll").prop('checked', 'checked'); } else { grid.thead.find(".checkAll").removeProp("checked"); } } function selectRow() { var checked = this.checked, row = $(this).closest("tr"), dataItem = grid.dataItem(row); var data = {productsList:[{ ProductId: dataItem.ProductID, ProductName: dataItem.ProductName, UnitPrice: dataItem.UnitPrice, UnitsInStock: dataItem.UnitsInStock, Discontinued: checked}] }; updateData(grid, data); } function selectAll() { var checked = this.checked; $.ajax({ url: '@Url.Action("Select_AllProducts", "Home")', data: { checkAll:checked }, type: "POST", success: function () { grid.dataSource.fetch(); } }); } $(document).ready(function () { grid = $("#grid").data("kendoGrid"); grid.table.on("click", ".checkbox", selectRow); grid.thead.on("click", ".checkAll", selectAll); checkHeader(allChecked); });
To see the complete example, refer to the project on how to post the selected Grid rows to the server.
More ASP.NET MVC Grid Resources
- ASP.NET MVC Grid Documentation
- ASP.NET MVC Grid Demos
- ASP.NET MVC Grid Product Page
- Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET MVC Forums