Selecting a Single Grid Row with the CheckBox Selectable Column

Environment

Product

Progress® 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"))
    )
)

script.js

$(document).ready(function () {
        var grid = $("#grid").data("kendoGrid");
        grid.tbody.on("click", ".k-checkbox", onClick);
        function onClick(e) {
            var grid = $("#grid").data("kendoGrid");
            var row = $(e.target).closest("tr");

            if (row.hasClass("k-selected")) {
                setTimeout(function (e) {
                    var grid = $("#grid").data("kendoGrid");
                    grid.clearSelection();
                })
            } else {
                grid.clearSelection();
            };
        };
    })

C#

	public partial class GridController : Controller
    {
		public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
		{
			var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel
			{
				OrderID = i,
				Freight = i * 10,
				OrderDate = DateTime.Now.AddDays(i),
				ShipName = "ShipName " + i,
				ShipCity = "ShipCity " + i
			});

			return Json(result.ToDataSourceResult(request));
		}
	}

C#

    public class OrderViewModel
    {
        public int OrderID { get; internal set; }
        public int Freight { get; internal set; }
        public DateTime OrderDate { get; internal set; }
        public string ShipName { get; internal set; }
        public string ShipCity { get; internal set; }
    }

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