Select a parent row if any of the child rows are selected in the Grid

Environment

Product

Progress® Kendo UI® Grid for jQuery

Description

I have a hierarchical Kendo Grid with checkboxes for selection. On selection of any of the child grid items, the parent grid row must be selected. How do I select/deselect the parent grid row based on selection of child grid row selection?

Solution

1. Add an event handler to the change event of the child grid.
2. Use the select() method to check if there are any selected rows
3. Get a reference to the master row and add or remove the k-selected class if there are any selected rows in the child grid.

    change: function(e){
        var masterRow = this.element.closest("tr").prev();
        if(this.select().length){
            masterRow.addClass("k-selected");
        } else {
            masterRow.removeClass("k-selected");
        }
    },

    <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function() {
                    var element = $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                            },
                            pageSize: 6,
                            serverPaging: true,
                            serverSorting: true
                        },
                        height: 600,
                        sortable: true,
                        pageable: true,
                        detailInit: detailInit,
                        dataBound: function() {
                            this.expandRow(this.tbody.find("tr.k-master-row").first());
                        },
                        columns: [{
                                field: "FirstName",
                                title: "First Name",
                                width: "110px"
                            },{
                                field: "LastName",
                                title: "Last Name",
                                width: "110px"
                            },{
                                field: "Country",
                                width: "110px"
                            },{
                                field: "City",
                                width: "110px"
                            },{
                                field: "Title"
                            }]
                    });
                });

                function detailInit(e) {                  
                    $("<div/>").appendTo(e.detailCell).kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            serverPaging: true,
                            serverSorting: true,
                            serverFiltering: true,
                            pageSize: 10,
                            filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
                        },
                        scrollable: false,
                        sortable: true,
                        pageable: true,
                        change: function(e){
                          var masterRow = this.element.closest("tr").prev();
                          if(this.select().length){
                            masterRow.addClass("k-selected");
                          } else {
                            masterRow.removeClass("k-selected");
                          }
                        },
                        columns: [
                            { selectable: true },
                            { field: "OrderID", width: "110px" },
                            { field: "ShipCountry", title:"Ship Country", width: "110px" },
                            { field: "ShipAddress", title:"Ship Address" },
                            { field: "ShipName", title: "Ship Name", width: "300px" }
                        ]
                    });
                }
            </script>
        </div>