New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Post Selected Grid Rows to Server

Environment

ProductTelerik UI for ASP.NET MVC Grid
Product version2025.1.227

Description

How can I post the selected Grid rows to the server?

Solution

You can achieve this requirement using the following implementation:

  1. 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"))
        )
    )
  2. Add the custom JavaScript logic that processes and posts the selected rows:

    JS
        var 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

See Also