|
| 1 | +--- |
| 2 | +title: Select Only One Grid Row with the Checkbox selectable column |
| 3 | +description: Remove the master checkbox of the built-in checkbox column in the Telerik UI Grid. Limit the selection to ine selected Grid row only. |
| 4 | +type: how-to |
| 5 | +page_title: Limit the Selection to a Single Row |
| 6 | +slug: grid-singe-checkbox-selection |
| 7 | +tags: grid, checkbox, single, select, one, row, only |
| 8 | +res_type: kb |
| 9 | +--- |
| 10 | + |
| 11 | +## Environment |
| 12 | + |
| 13 | +<table> |
| 14 | + <tbody> |
| 15 | + <tr> |
| 16 | + <td>Product</td> |
| 17 | + <td>Progress® Telerik® UI Grid for {{ site.product_short }}</td> |
| 18 | + </tr> |
| 19 | + </tbody> |
| 20 | +</table> |
| 21 | + |
| 22 | +## Description |
| 23 | + |
| 24 | +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? |
| 25 | + |
| 26 | +## Solution |
| 27 | +1. Remove the master checkbox by adding an empty header template to the column. |
| 28 | +2. Subscribe for the [click](https://api.jquery.com/click/) event of the checkboxes by using a jQuery selector. |
| 29 | +3. In the `click` event handler, get the row and the row classes by using the [closest](https://api.jquery.com/closest/) jQuery method. |
| 30 | +4. Based on the row classes, use the [clearSelection](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/clearselection) method of the Grid. |
| 31 | + |
| 32 | +```View |
| 33 | +
|
| 34 | +@(Html.Kendo().Grid<CheckboxSelectOneRowOnly.Models.OrderViewModel>() |
| 35 | + .Name("grid") |
| 36 | + .Columns(columns => |
| 37 | + { |
| 38 | + columns.Select().Width(50).HeaderTemplate(h=>h); |
| 39 | + columns.Bound(p => p.OrderID).Filterable(false); |
| 40 | + columns.Bound(p => p.Freight); |
| 41 | + columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}"); |
| 42 | + columns.Bound(p => p.ShipName); |
| 43 | + columns.Bound(p => p.ShipCity); |
| 44 | + }) |
| 45 | + .Pageable() |
| 46 | + .Sortable() |
| 47 | + .Scrollable() |
| 48 | + .Filterable() |
| 49 | + .HtmlAttributes(new { style = "height:550px;" }) |
| 50 | + .DataSource(dataSource => dataSource |
| 51 | + .Ajax() |
| 52 | + .PageSize(20) |
| 53 | + .Read(read => read.Action("Orders_Read", "Grid")) |
| 54 | + ) |
| 55 | +) |
| 56 | +``` |
| 57 | +```script.js |
| 58 | +$(document).ready(function () { |
| 59 | + var grid = $("#grid").data("kendoGrid"); |
| 60 | + grid.tbody.on("click", ".k-checkbox", onClick); |
| 61 | + function onClick(e) { |
| 62 | + var grid = $("#grid").data("kendoGrid"); |
| 63 | + var row = $(e.target).closest("tr"); |
| 64 | + |
| 65 | + if (row.hasClass("k-state-selected")) { |
| 66 | + setTimeout(function (e) { |
| 67 | + var grid = $("#grid").data("kendoGrid"); |
| 68 | + grid.clearSelection(); |
| 69 | + }) |
| 70 | + } else { |
| 71 | + grid.clearSelection(); |
| 72 | + }; |
| 73 | + }; |
| 74 | + }) |
| 75 | +``` |
| 76 | +```Controller |
| 77 | + public partial class GridController : Controller |
| 78 | + { |
| 79 | + public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request) |
| 80 | + { |
| 81 | + var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel |
| 82 | + { |
| 83 | + OrderID = i, |
| 84 | + Freight = i * 10, |
| 85 | + OrderDate = DateTime.Now.AddDays(i), |
| 86 | + ShipName = "ShipName " + i, |
| 87 | + ShipCity = "ShipCity " + i |
| 88 | + }); |
| 89 | +
|
| 90 | + return Json(result.ToDataSourceResult(request)); |
| 91 | + } |
| 92 | + } |
| 93 | +``` |
| 94 | +```Model |
| 95 | + public class OrderViewModel |
| 96 | + { |
| 97 | + public int OrderID { get; internal set; } |
| 98 | + public int Freight { get; internal set; } |
| 99 | + public DateTime OrderDate { get; internal set; } |
| 100 | + public string ShipName { get; internal set; } |
| 101 | + public string ShipCity { get; internal set; } |
| 102 | + } |
| 103 | +``` |
0 commit comments