New to Telerik UI for ASP.NET MVC? Download free 30-day trial

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

  1. Create a button and handle its click event.
  2. Use the client-side select() method to get the selected row elements.
  3. Iterate through the selected rows, retrieve the respective data item through the dataItem() method of the Grid, and store it in an array selectedDataItems.
  4. Convert the data items into strings by using the JSON.stringify() method.
  5. Perform an asynchronous HTTP (Ajax) request to the server.
  6. 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;
    ...
  }

More ASP.NET MVC Grid Resources

See Also

In this article