Set Expanded Panel On Init

5 posts, 0 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 26 Jun 2015 Link to this post

    I'm using a panelbar to display a list of chapters. Within each panel is a list of tasks within that chapter. Think of it like a list:

    • Chapter 1
    •     Task 1
    •     Task 2
    • Chapter 2
    •     Task 3
    •     Task 4
    • Chapter 3
    •     Task 5

    When the page is loaded, I want to expand the panel w/ the first incomplete task. I know which chapter contains this task (by index, not by ID), and want to have it be expanded when I initialize the panelbar.

    Current accordion JS:

    function initTasksAccordion() {
        $("#task_accordion").kendoPanelBar({
            expandMode: "multiple"
        });
    }

    And some sample HTML:

    <ul id="task_accordion">
        # for (var c = 0; c < data.Chapters.length; c++) { #
                <li>#= data.Chapters[c].Name #                             
                    # for (var t = 0; t < data.Chapters[c].Tasks.length; t++) { #
                        <div>
                            <h3 class="item-title">#= data.Chapters[c].Tasks[t].Name #</h3>                        
                            <div class="clear"></div>
                        </div>
                    # } #
                </li>
            # } #
        </ul>

    So if my first incomplete task is Task 4, I would know that it's the second (or first, if you use 0-based indexing) panel I want to have expanded when the panelbar is created. While I do have multiple selection enabled, for the initial load, only the one panel (with the incomplete task) should be expanded.

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 30 Jun 2015 Link to this post

    Hello,

    you can use the expand method of the panelbar to expand the item you need.

    Regards,
    Petyo
    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. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 30 Jun 2015 in reply to Petyo Link to this post

    Yes, I saw that in the documentation. However, as mentioned in my post, I don't have or know the ID of the panel I want opened. All I know is the index of the panel - ie. the third or seventh etc.

    All the examples (and the description) for that method indicate you need an ID. So how can I expand a panel by index instead of by ID?

  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 02 Jul 2015 Link to this post

    Hi,

    you can use any jquery selector to find that item - including :eq().

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 02 Jul 2015 in reply to Petyo Link to this post

    Thank you Petyo.
Back to Top
Kendo UI is VS 2017 Ready