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
- Remove the master checkbox by adding an empty header template to the column.
- Subscribe for the
clickevent of the checkboxes by using a jQuery selector. - In the
clickevent handler, get the row and the row classes by using theclosestjQuery method. - Based on the row classes, use the
clearSelectionmethod of the Grid.
@(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"))
)
)
$(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();
};
};
})
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));
}
}
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; }
}