This is a migrated thread and some comments may be shown as answers.

How to expand and collapse Hierarchy grid

1 Answer 400 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Taffere
Top achievements
Rank 1
Taffere asked on 04 Aug 2014, 07:24 PM
I have used the following example to construct my kendo grid and I want to collapse and expand using a toggle button or link. I researched and I found one example which uses a function(ToggleAllKendoGridDetailRows) to expand and collapse the grid but I am getting errors saying that tbody is undefined. I tried to debug and I notice that  var grid = $('#Grid').data('kendoGrid'); grid is also undefined but I see my grid table works fine. can you please help?

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/hierarchy">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
    
        <div id="example">
            <div id="grid"></div>
          
          <a href="#" class="toggleDetail" title="Expand all rows" onclick="ToggleAllKendoGridDetailRows('expand');">Toggle</a>

            <script>
                $(document).ready(function() {
                    var element = $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "http://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 ToggleAllKendoGridDetailRows(direction) {
                    //Get a collection of all rows in the grid
                    var grid = $('#Grid').data('kendoGrid');
                    var allMasterRows = grid.tbody.find('>tr.k-master-row');

                    //Loop through each row and collapse or expand the row depending on set deriction
                    if (direction == 'collapse') {
                        $(".toggleDetail").attr("onclick", "ToggleAllKendoGridDetailRows('expand')");
                        $(".toggleDetail").text("Expand all rows");
                        for (var i = 0; i < allMasterRows.length; i++) {
                            grid.collapseRow(allMasterRows.eq(i));
                        }
                    } else if (direction == 'expand') {
                        $(".toggleDetail").attr("onclick", "ToggleAllKendoGridDetailRows('collapse')");
                        $(".toggleDetail").text("Collapse all rows");
                        for (var i = 0; i < allMasterRows.length; i++) {
                            grid.expandRow(allMasterRows.eq(i));
                        }
                    }
                }
              
                function detailInit(e) {
                    $("<div/>").appendTo(e.detailCell).kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "http://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: "70px" },
                            { field: "ShipCountry", title:"Ship Country", width: "110px" },
                            { field: "ShipAddress", title:"Ship Address" },
                            { field: "ShipName", title: "Ship Name", width: "300px" }
                        ]
                    });
                }
            </script>
        </div>


</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 05 Aug 2014, 09:54 AM
Hi Taffere,


The ID of the current Grid is grid (lowercase). This is the reason why the Grid instance is not retrieved correctly.
E.g.
var grid = $('#grid').data('kendoGrid');

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Taffere
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or