This is a migrated thread and some comments may be shown as answers.

Set Expanded Panel On Init

4 Answers 104 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Ashleigh L
Top achievements
Rank 1
Ashleigh L asked on 26 Jun 2015, 08:17 PM

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.

4 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 30 Jun 2015, 03:41 PM
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!
 
0
Ashleigh L
Top achievements
Rank 1
answered on 30 Jun 2015, 03:45 PM

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?

0
Petyo
Telerik team
answered on 02 Jul 2015, 06:44 AM
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!
 
0
Ashleigh L
Top achievements
Rank 1
answered on 02 Jul 2015, 04:53 PM
Thank you Petyo.
Tags
PanelBar
Asked by
Ashleigh L
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Ashleigh L
Top achievements
Rank 1
Share this question
or