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:

    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.

Post Selected Grid Rows to Server

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also