Expand and Collapse Details on Master Row Click in Grid

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	Created with the 2017.3.1026 version

Description

How can I expand and collapse the details by clicking the relevant master row in the Kendo UI Grid?

Solution

1. Attach a click handler to the master rows.
2. In the click event handler and based on the k-i-expand icon, use the expandRow or the collapseRow methods of the Grid.

<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(e) {
                    var grid = e.sender;

                    grid.tbody.find("tr.k-master-row").click(function(e) {
                        var target = $(e.target);
                        if ((target.hasClass("k-i-expand")) || (target.hasClass("k-i-collapse"))) {
                            return;
                        }

                        var row = target.closest("tr.k-master-row");
                        var icon = row.find(".k-i-expand");

                        if (icon.length) {
                            grid.expandRow(row);
                        } else {
                            grid.collapseRow(row);
                        }
                    })

                },
                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,
                columns: [{
                        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>

See Also

• Expand and Collapse Group on Group Row Click in Grid