Select Checkbox Rows by Clicking Anywhere on the Row

Environment

Product Version 2017.3 1026
Product Progress Kendo UI Grid

Description

How can I select rows with checkboxes by clicking anywhere on the row of the Grid?

Solution

  1. Handle the click event of the row.
  2. In the event handler, programmatically click on the checkbox.
<div id="example">
    <div id="grid"></div>

    <script>
        $(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"
                        }
                    }
                },
                dataBound: onDataBound,
                pageable: true,
                scrollable: false,
                persistSelection: true,
                sortable: true,
                columns: [{
                        selectable: true,
                        width: "50px"
                    },
                    {
                        field: "ProductName",
                        title: "Product Name"
                    },
                    {
                        field: "UnitPrice",
                        title: "Unit Price",
                        format: "{0:c}"
                    },
                    {
                        field: "UnitsInStock",
                        title: "Units In Stock"
                    },
                    {
                        field: "Discontinued"
                    }
                ]
            });
        });

        function onDataBound(e) {
            var grid = e.sender;
            var rows = grid.tbody.find("[role='row']");

            rows.unbind("click");
            rows.on("click", onClick)

        };

        function onClick(e) {
            if ($(e.target).hasClass("k-checkbox-label")) {
                return;
            }
            var row = $(e.target).closest("tr");
            var checkbox = $(row).find(".k-checkbox");

            checkbox.click();
        };
    </script>
</div>
In this article
Not finding the help you need? Improve this article