New to Kendo UI for jQuery? Download free 30-day trial

Select Only One Grid Row with the Checkbox Selectable Column

Environment

Product Progress® Kendo UI® Grid for jQuery
Product Version Tested up to version 2017.2 621

Description

I want to remove the master checkbox of the built-in checkbox column in the Kendo 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.
<div id="example">
    <div id="grid"></div>

    <script>
        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();
            };
        };

        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    pageSize: 10,
                    transport: {
                        read: {
                            url: "https://demos.telerik.com/kendo-ui/service/Products",
                            dataType: "jsonp"
                        }
                    },
                    schema: {
                        model: {
                            id: "ProductID"
                        }
                    }
                },
                pageable: true,
                scrollable: false,
                sortable: true,
                columns: [{
                        selectable: true,
                        width: "50px",
                        headerTemplate: ' '
                    },
                    {
                        field: "ProductName",
                        title: "Product Name"
                    },
                    {
                        field: "UnitPrice",
                        title: "Unit Price",
                        format: "{0:c}"
                    },
                    {
                        field: "UnitsInStock",
                        title: "Units In Stock"
                    },
                    {
                        field: "Discontinued"
                    }
                ]
            });

            var grid = $("#grid").data("kendoGrid");

            grid.tbody.on("click", ".k-checkbox", onClick);
        });
    </script>
</div>

Notes

The checkbox selectable column is available as of the Kendo UI R2 2017 SP1 release.

See Also

In this article