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

Selecting a Single Grid Row with the CheckBox Selectable Column

Environment

ProductProgress® Telerik® UI Grid for UI for ASP.NET Core

Description

I want to remove the master checkbox of the built-in checkbox column in the Telerik UI Grid. How can I limit the selection to one selected Grid row only?

Solution

  1. Remove the master checkbox by adding an empty header template to the column.
  2. Subscribe for the click event of the checkboxes by using a jQuery selector.
  3. In the click event handler, get the row and the row classes by using the closest jQuery method.
  4. Based on the row classes, use the clearSelection method of the Grid.
Razor

@(Html.Kendo().Grid<CheckboxSelectOneRowOnly.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Select().Width(50).HeaderTemplate(h=>h);
        columns.Bound(p => p.OrderID).Filterable(false);
        columns.Bound(p => p.Freight);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
    )
)

More ASP.NET Core Grid Resources

See Also