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:
functioninitTasksAccordion() { $("#task_accordion").kendoPanelBar({ expandMode: "multiple" });}And some sample HTML:
<ulid="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> <h3class="item-title">#= data.Chapters[c].Tasks[t].Name #</h3> <divclass="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.