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

State management of child grids

3 Answers 296 Views

Grid

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

3 Answers, 1 is accepted

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:

http://demos.telerik.com/kendo-ui/grid/persist-state

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.

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>

002.<html>

003.<head>

004. <base href="http://demos.telerik.com/kendo-ui/grid/angular">

005. <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

006. <title></title>

007. <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-material.min.css" />

008. <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.min.css" />

009. <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.mobile.min.css" />

010.

011. <script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>

012. <script src="//kendo.cdn.telerik.com/2016.3.914/js/angular.min.js"></script>

013. <script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>

014.</head>

015.<body>

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>

034.

035.

036. </div>

037.</div>

038.

039.<style>

040. .contact-info-form {

041. list-style-type: none;

042. margin: 30px 0;

043. padding: 0;

044. }

045.

046. .contact-info-form li {

047. margin: 10px 0;

048. }

049.

050. .contact-info-form label {

051. display: inline-block;

052. width: 100px;

053. text-align: right;

054. font-weight: bold;

055. }

056.</style>

057.

058.<script>

059. angular.module("KendoDemos", [ "kendo.directives" ])

060. .controller("MyCtrl", function($scope){

061. $scope.mainGridOptions = {

062. dataSource: {

063. type: "odata",

064. transport: {

065. read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"

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. };

094.

095. $scope.detailOneGridOptions = function(dataItem) {

096. return {

097. dataSource: {

098. type: "odata",

099. transport: {

100. read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"

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. };

120.

121. $scope.detailTwoGridOptions = function(dataItem) {

122. return {

123. dataSource: {

124. type: "odata",

125. transport: {

126. read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"

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. })

147.</script>

148.

149.

150.</body>

151.</html>

Thanks,

Arun Kumar

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:

http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#methods-activateTab

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.

Regards,
Stefan
Telerik by Progress

Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.