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.