State management of child grids

4 posts, 0 answers
  1. Arun
    Arun avatar
    2 posts
    Member since:
    Jul 2016

    Posted 06 Oct Link to this post


        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

  2. Dimiter Topalov
    Dimiter Topalov avatar
    347 posts

    Posted 10 Oct Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Arun
    Arun avatar
    2 posts
    Member since:
    Jul 2016

    Posted 14 Oct in reply to Dimiter Topalov Link to this post

    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


  5. Stefan
    Stefan avatar
    264 posts

    Posted 18 Oct Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready