How can i maintain persist state for panel bar

4 posts, 0 answers
  1. Raja
    Raja avatar
    4 posts
    Member since:
    Jul 2014

    Posted 14 Dec 2015 Link to this post

    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>

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 15 Dec 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Raja
    Raja avatar
    4 posts
    Member since:
    Jul 2014

    Posted 18 Dec 2015 Link to this post

    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 ?

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 21 Dec 2015 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready