Set Expanded Panel On Init

[Ashleigh L]

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.

[Petyo]

Hello,

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

Regards,
Petyo
Telerik

 

 

[Ashleigh L]

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?

[Petyo]

Hi,

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

Regards,
Petyo
Telerik

 

 

[Ashleigh L]

Thank you Petyo.