KendoUI PanelBar remember expanded items

Question

I try implement Kendo UI PanelBar (see http://demos.kendoui.com/web/panelbar/images.html) If I open some items (Golf, Swimming) and next click to "Videos Records", I have expanded items. But when I do refresh page (click on some link), all expanded structure is lost.

On KendoUI forum I found, that I can get only possition of selected item and after reload page I must calculate all noded. Is there any way, how can I have expanded items in my situation? If do not need, I don't want to use the html frames.

Best regards, Peter

Answer 1

Thank you for your answer, was very usefull. I add here code of skeleton of jQuery which remember 1 selected item now. Required add jquery.cookie.js [https://github.com/carhartl/jquery-cookie]

function onSelect(e) {
    var item = $(e.item),
        index = item.parentsUntil(".k-panelbar", ".k-item").map(function () {
            return $(this).index();
        }).get().reverse();

    index.push(item.index());

    $.cookie("KendoUiPanelBarSelectedIndex", index);
    //alert(index);
}

var panel = $("#panelbar").kendoPanelBar({
    select: onSelect
}).data("kendoPanelBar");

//$("button").click(function () {
//    select([0, 2]);
//});

function select(position) {
    var ul = panel.element;
    for (var i = 0; i < position.length; i++) {
        var item = ul.children().eq(position[i]);
        if (i != position.length - 1) {
            ul = item.children("ul");
            if (!ul[0])
                ul = item.children().children("ul");
            panel.expand(item, false);
        } else {
            panel.select(item);
        }
    }
}

// on page ready select value from cookies
$(document).ready(function () {
    if ($.cookie("KendoUiPanelBarSelectedIndex") != null) {
        //alert($.cookie("KendoUiPanelBarSelectedIndex"));
        var numbersArray = $.cookie("KendoUiPanelBarSelectedIndex").split(',');
        select(numbersArray);
    }
    else {
        // TEST INIT MESSAGE, ON REAL USE DELETE 
        alert("DocumenReadyFunction: KendoUiPanelBarSelectedIndex IS NULL");
    }
});

Answer 2

You can use this block to work withe the selected. in this example, i am just expanding the panel item. You can do other things such as saving panel item in your dom for later use or may be saving it somewhere to use it later:

var panelBar =  $("#importCvPanelbar").data("kendoPanelBar");
                panelBar.bind("select", function(e) {
                var itemId = $(e.item)[0].id;

                panelBar.expand(itemId);// will expand the selected one
            });

Answer 3

The opening of the panels happens on the client. When the page is refreshed, the browser will render the provided markup, which does not include any additional markup for the selected panel.

In order to accomplish this, you will need to somehow store a value indicating the opened panel. The easiest way to accomplish this would be with a cookie (either set by JavaScript or do an AJAX call to the server).

Then, when the panelBar is being rendered, it will use the value in the cookie to set the correct tab as the selected one.