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

[Solved] How can i maintain persist state for panel bar

3 Answers 510 Views

PanelBar

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

Raja asked on 14 Dec 2015, 10:09 AM

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>

<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

answered on 15 Dec 2015, 03:55 PM

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:

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!

answered on 21 Dec 2015, 08:22 AM

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!