Edit this page

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy