Sending the Selected Grid Rows to the Controller

Environment

Product Version	2022.3.913
Product	Telerik UI for ASP.NET Core Grid

Description

How can I get the selected rows in the Telerik UI for ASP.NET Core 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.

Razor

    @(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
    )
    

JavaScript

    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;'
        });
    }

C#

  public ActionResult GetSelectedRows([FromBody] List<GridModel> rows)
  {
    List<GridModel> selecteditems = rows;
    ...
  }

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base