Select Checkbox Rows by Clicking Anywhere on the Row

Environment

Product Version	2020.3.1021
Product	Progress® Kendo UI® Grid for jQuery

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")) {
                return;
            }
            var row = $(e.target).closest("tr");
            var checkbox = $(row).find(".k-checkbox");

            checkbox.click();
        };
    </script>
</div>