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

State management of child grids

3 Answers 55 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Arun asked on 06 Oct 2016, 12:40 PM


    I have a link in a column (using the "template" option) within a child grid, which on clicking will redirect to a new page. When I click the back button on the browser, I would like to have the grids in the state that they were in. I found an option for the main grid using setOptions and getOptions. But how do you manage the state of the child grid?


For example, if I have the second row of the main grid expanded which in turn has a child grid which is in the third page, when I return back, I want the second row of the main grid to be expanded and the child grid should be in the third page. Is this possible?



    Arun Kumar

3 Answers, 1 is accepted

Sort by
Dimiter Topalov
Telerik team
answered on 10 Oct 2016, 07:57 AM
Hello Arun,

You can use the same approach for preserving the state of the child Grids, as you would do for the parent Grid. The options for all Grids on the page can be preserved via the getOptions() method, and subsequently retrieved and set back via setOptions().

You can use a custom event handler to save the state of all Grids, currently on the page, and another one to set back the stored options for each Grid.

You can check out the Grid preserve state online demo for an example of how the Grid's options can be saved and retrieved using the localStorage:

I hope this helps.

Dimiter Topalov
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Top achievements
Rank 1
answered on 14 Oct 2016, 06:37 AM

Hello Dimiter,

    Thanks a lot for your response. I have now solved this problem. Now I have another problem for which I need some help. I have something similar to the below where I have two child grids within a kendo tabstrip within the main grid. As you see below, the subgrids have a link in the ID column which will redirect to a new page using angular ng-route.I have 2 problems now -

(i) When I click on the link in the ID column of the Orders Two tab, I go to the new page. When I click the back button on the browser, I need to set the Orders Two tab as the active tab. Currently, the kendo tabstrip is being reset to the original state on coming back and the Orders One tab is active by default.

(ii) When I sort based on a column in the Orders One grid of the first employee, I find that the sorting is applied to all the Orders One grid for all employees. Not sure if I am missing something. I have given the results of an angular service as the data source using the transport option. This angular service caches the return of a http service and returns that data.

001.<!DOCTYPE html>
005.    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
006.    <title></title>
007.    <link rel="stylesheet" href="//" />
008.    <link rel="stylesheet" href="//" />
009.    <link rel="stylesheet" href="//" />
011.    <script src="//"></script>
012.    <script src="//"></script>
013.    <script src="//"></script>
016.<div id="example" ng-app="KendoDemos">
017.    <div ng-controller="MyCtrl">
018.        <kendo-grid options="mainGridOptions">
019.            <div k-detail-template>
020.                <kendo-tabstrip>
021.                <ul>
022.                    <li class="k-state-active">Orders One</li>
023.                    <li>Orders Two</li>
024.                </ul>
025.                <div>
026.                    <div kendo-grid k-options="detailOneGridOptions(dataItem)"></div>
027.                </div>
028.                <div>
029.                    <div kendo-grid k-options="detailTwoGridOptions(dataItem)"></div>
030.                </div>
031.                </kendo-tabstrip>
032.            </div>
033.        </kendo-grid>
036.    </div>
040.  .contact-info-form {
041.    list-style-type: none;
042.    margin: 30px 0;
043.    padding: 0;
044.  }
046.  .contact-info-form li {
047.    margin: 10px 0;
048.  }
050.  .contact-info-form label {
051.    display: inline-block;
052.    width: 100px;
053.    text-align: right;
054.    font-weight: bold;
055.  }
059.    angular.module("KendoDemos", [ "kendo.directives" ])
060.        .controller("MyCtrl", function($scope){
061.            $scope.mainGridOptions = {
062.                dataSource: {
063.                    type: "odata",
064.                    transport: {
065.                        read: "//"
066.                    },
067.                    pageSize: 5,
068.                    serverPaging: true,
069.                    serverSorting: true
070.                },
071.                sortable: true,
072.                pageable: true,
073.                dataBound: function() {
074.                    this.expandRow(this.tbody.find("tr.k-master-row").first());
075.                },
076.                columns: [{
077.                    field: "FirstName",
078.                    title: "First Name",
079.                    width: "120px"
080.                    },{
081.                    field: "LastName",
082.                    title: "Last Name",
083.                    width: "120px"
084.                    },{
085.                    field: "Country",
086.                    width: "120px"
087.                    },{
088.                    field: "City",
089.                    width: "120px"
090.                    },{
091.                    field: "Title"
092.                }]
093.            };
095.            $scope.detailOneGridOptions = function(dataItem) {
096.                return {
097.                    dataSource: {
098.                        type: "odata",
099.                        transport: {
100.                            read: "//"
101.                        },
102.                        serverPaging: true,
103.                        serverSorting: true,
104.                        serverFiltering: true,
105.                        pageSize: 5,
106.                        filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
107.                    },
108.                    scrollable: false,
109.                    sortable: true,
110.                    pageable: true,
111.                  resizable: true,
112.                    columns: [
113.                    { field: "OrderID", title:"ID", width: "120px", template: function(dataItem) {return '<a href="#">' + dataItem.OrderID + '</a>';} },
114.                    { field: "ShipCountry", title:"Ship Country", width: "110px" },
115.                    { field: "ShipAddress", title:"Ship Address" },
116.                    { field: "ShipName", title: "Ship Name", width: "190px" }
117.                    ]
118.                };
119.            };
121.      $scope.detailTwoGridOptions = function(dataItem) {
122.                return {
123.                    dataSource: {
124.                        type: "odata",
125.                        transport: {
126.                            read: "//"
127.                        },
128.                        serverPaging: true,
129.                        serverSorting: true,
130.                        serverFiltering: true,
131.                        pageSize: 5,
132.                        filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
133.                    },
134.                    scrollable: false,
135.                    sortable: true,
136.                    pageable: true,
137.                  resizable: true,
138.                    columns: [
139.                    { field: "OrderID", title:"ID", width: "120px", template: function(dataItem) {return '<a href="#">' + dataItem.OrderID + '</a>';} },
140.                    { field: "ShipCountry", title:"Ship Country", width: "110px" },
141.                    { field: "ShipAddress", title:"Ship Address" },
142.                    { field: "ShipName", title: "Ship Name", width: "190px" }
143.                    ]
144.                };
145.            };
146.        })



    Arun Kumar


Telerik team
answered on 18 Oct 2016, 01:48 PM
Hello Arun,

Regarding the questions:

1) Select the second tab as active: I can suggest using a flag to track if the link was clicked on the first or the second tab. If the link was clicked from the second tab, use the activateTab  method of the Kendo UI TabStrip to set the second tab as active on the custom event when the back button is clicked:

2) I was not able to observe the same behaviour from the provided example. If I understand correctly, if the column for example Ship Country from Orders One of Nancy Davolio is sorted, the Ship Country from Orders One will be sorted for every record in the main Grid. If that is correct please send more information so we can investigate, as for now only one of the columns is sorted.

Let me know if you need additional information on this matter.

Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Asked by
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Top achievements
Rank 1
Telerik team
Share this question