How can i maintain persist state when i redirect to the corresponding pages
<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" href="styles/kendo.common.min.css" /> <link rel="stylesheet" href="styles/kendo.default.min.css" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script></head><body> <div id="example"> <div class="demo-section k-content"> <ul id="panelbar"> <li><a href="page1.aspx"></a>Page1</li> <li><a href="page2.aspx"></a>Page2</li> <li><a href="page3.aspx"></a>Page3</li> <li> Page Sub Level2 <ul> <li><a href="page4.aspx"></a>Page4</li> <li><a href="page5.aspx"></a>Page5</li> <li><a href="page6.aspx"></a>Page6</li> <li> <ul> <li><a href="page7.aspx"></a>Page7</li> <li><a href="page8.aspx"></a>Page8</li> <li><a href="page9.aspx"></a>Page9</li> </ul> </li> </ul> </li> <li><a href="page10.aspx"></a>Page10</li> <li> Page Sub Level22 <ul> <li><a href="Page11.aspx"></a>Page11</li> <li><a href="Page12.aspx"></a>Page12</li> <li><a href="Page13.aspx"></a>Page13</li> </ul> </li> <li><a href="Page14.aspx"></a>Page14</li> </ul> </div> <div class="box"> <h4>Console log</h4> <div class="console"></div> </div> </div> <script> function onSelect(e) { kendoConsole.log("Select: " + $(e.item).find("> .k-link").text()); } function onExpand(e) { kendoConsole.log("Expand: " + $(e.item).find("> .k-link").text()); } function onCollapse(e) { kendoConsole.log("Collapse: " + $(e.item).find("> .k-link").text()); } function onActivate(e) { kendoConsole.log("Activate: " + $(e.item).find("> .k-link").text()); } function onContentLoad(e) { kendoConsole.log("Content loaded in <b>" + $(e.item).find("> .k-link").text() + "</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>"); } function onError(e) { kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status); } $("#panelbar").kendoPanelBar({ expandMode: "single", select: onSelect, expand: onExpand, collapse: onCollapse, activate: onActivate, contentLoad: onContentLoad, error: onError, contentUrls: [, , , "../content/web/panelbar/ajax/ajaxContent1.html", "error.html"] }); </script></body></html>3 Answers, 1 is accepted
0
Hi Prasad,
Thank you for considering Kendo UI.
I suppose you want to expand the PanelBar items to show the item, which corresponds to the current page. In this case, the easiest way to achieve that is to find the respective PanelBar item by its content, find all its ancestor <li> elements and expand them all, starting from the top-most item in the hierarchy.
https://api.jquery.com/closest/
http://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar#methods-expand
In order to restore the state of all PanelBar items, you can use the collapse and expand events of the Kendo UI PanelBar to retrieve information about the items the user is collapsing or expanding. If selection is also important, then use the select event too.
Store the state information in a database, cookie, local/session storage, etc.
Afterwards, it can be retrieved and used to check whether the corresponding item needs to be expanded/selected programmatically:
I hope this helps.
Regards,
Dimiter Topalov
Telerik
Thank you for considering Kendo UI.
I suppose you want to expand the PanelBar items to show the item, which corresponds to the current page. In this case, the easiest way to achieve that is to find the respective PanelBar item by its content, find all its ancestor <li> elements and expand them all, starting from the top-most item in the hierarchy.
https://api.jquery.com/closest/
http://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar#methods-expand
In order to restore the state of all PanelBar items, you can use the collapse and expand events of the Kendo UI PanelBar to retrieve information about the items the user is collapsing or expanding. If selection is also important, then use the select event too.
Store the state information in a database, cookie, local/session storage, etc.
Afterwards, it can be retrieved and used to check whether the corresponding item needs to be expanded/selected programmatically:
var itemStateArray; // an array or object that stores the items' state$("#panelbar").kendoPanelBar();// change the value of the flags in the expand/collapse event handlers to store the // state of the corresponding item // access an existing PanelBar instance var panelBar = $("#panelbar").data("kendoPanelBar"); // conditionally select and/or expand an item, based on the previously stored // state: if(/* condition for a specific item */){ // select the item with ID "item1" panelBar.select("#item1"); // and/or expand the item panelBar.expand("#item1"); }I hope this helps.
Regards,
Dimiter Topalov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Raja
Top achievements
Rank 2
Rank 2
answered on 18 Dec 2015, 08:21 AM
i accepted with your answer..
if app is accessing in multiple browser local storage will get fail...
in this case how we can maintain ? with the help of urlname it is possible to expand ?
0
Hi Prasad,
In order to preserve the collapsed/expanded state of the PanelBar items across multiple browsers, you will need to store this information on the server, e.g. in a database. Then based on the state, stored in the database, you can expand the corresponding items programmatically where necessary.
On a side note, I did not understand whether your goal is to expand only the item, which corresponds to the currently opened page, or expand all items that have been expanded previously. In the former case, you don't need to store anything, just follow the first suggestion in my first reply.
Regards,
Dimiter Topalov
Telerik
In order to preserve the collapsed/expanded state of the PanelBar items across multiple browsers, you will need to store this information on the server, e.g. in a database. Then based on the state, stored in the database, you can expand the corresponding items programmatically where necessary.
On a side note, I did not understand whether your goal is to expand only the item, which corresponds to the currently opened page, or expand all items that have been expanded previously. In the former case, you don't need to store anything, just follow the first suggestion in my first reply.
Regards,
Dimiter Topalov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!