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?
3 Answers, 1 is accepted
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.
Telerik by Progress
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.
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