kendo-uiremember-mepanelbar

KendoUI PanelBar remember expanded items


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


Solution

  • 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");
        }
    });