How to get Ids of PanelBar Items?

[Neil]

I have been reading through the PanelBar documentation on this page:

http://www.kendoui.com/documentation/ui-widgets/panelbar/methods.aspx 

under the 'expand' example it provides a snippet of code showing how to select an item using an id selector.

However, with my PanelBar implementation none of the <li /> are rendered with IDs, only CSS classes (e.g. <li class="k-item k-state-default"></li>).  

How can I get the PanelBar to render id attributes for it's list items? what properties do I need to include in my data source? I've tried adding an "id" property but it doesn't change anything.

Alternatively, is there a simple way to persist the state of the PanelBar that I am missing? I'm currently writing/reading values to localStorage in the collapse/expand events and then attempting to call the expand method for PanelBar groups based on the retrieved values but it's proving to be a real pain with no ids.

Thanks,

Neil.
(I am using the Trial version of the Kendo UI controls - v2012.2.710) 

[Neil]

Never mind, I solved the problem by using checking the local storage directly in the dataSource declaration for the panel bar e.g.: setting this property:

expanded: localStorage.getItem("LeftMenu::Group 1") == "true" ? true : false

Obviously there'll be issues if the browser doesn't support localStorage but that's what modernizr is for :)
So simple yet yesterday I just couldn't see the wood for the trees...

[Martin]

I notice this question, and another similar question have remained unanswered. And yet this appears to be a legitimate question. The document gives a code segment example like:

var panelBar = $("#panelBar").data("kendoPanelBar");

panelBar.expand($("#item1")); // Expand the item with id = item1

and yet as the original poster pointed out, the items are not given ids.

I have a grid in the first panelbar and when the user clicks on a link in the grid, I want to open that detail in the second panelbar item which seems like an excellent way to preserve screen real estate by collapsing the grid while it is viewed. 

Given that the documentation says to call the expand method with the id of the item and the item doesn't have an id, how should we call it.

On a second more mundane note, when I write the javascript and assign a value to panelBar inj the above example, I don't get intellisense in VS2012 to allow me to choose methods and properties from panelBar. Do I have to do some magic to enable this?

[Martin]

I eventually figured out how to0 do this, but it was a lot more work than it should have been and there appears to be a bug in the HTML Helper for generating an item in a panelbar. The code to find the panelbar item assumed that the code generated was of the following form.

<ul id="panelbar">

  <li>

    <a>

      <span>The name of the panelbar Item</span>

    </a>

  </li>

</ul>

But when I used the code which was effectively looking for a span that contained the name. On investigation I found that my HTML Helper was generating code as below:

<ul id="panelbar">

  <li>

    <a>The name of the panelbar Item

      <span></span>

    </a>

  </li>

</ul>

Which I imagine to be a bug. But I adjusted the code and got it to work. But this implementation leaves the coder at the mercy of Telerik changing future implementations. I think this is a bug which needs to be addressed.

So I tried an improvement. I coded the Helper as:

@(Html.Kendo().PanelBar()

     .Name("Accordion")

     .ExpandMode(PanelBarExpandMode.Single)

     .Items(panelbar =>

     {

        panelbar.Add().Text("Searching")

              .HtmlAttributes(new { id = "Searching" })

            .Content(Html.Partial("Searching").ToHtmlString())

            .Expanded(true);

        panelbar.Add().Text("Invoice")

            .Content(

                @<text>

                <div id="Invoice" />

                </text>);

    })

Where I added an id to the <li> 
Then I was able to locate the item by $("#panelbar").find("#Searching")

I tested this and was very pleased with myself at this vastly superior way of finding the item. BUT I discovered that it only works ONCE, After the li item has been expanded the id is removed from it and so this doesn't work.

But it seems to me that a better implementation of this would be for Telerik to implement an Items() function which took either a number, in which case it was used as an index, or a string in which case it searched for an id. The id should be added by a .Name("id") in the helper and then the expand() function should be attached to the li. This would allow me to write code to expand the item called "Searching" as follows:

var panelbar = $("#panelbar").data("kendoPanelBar");

panelbar.Items("Searching").expand();

This makes the code look a lot more intuitive and allows Telerik to change the implementation of the presentation without breaking user code.

[Petur Subev]

Hello Neil,

Setting an Id attribute to the LI item which the PanelBar helper will generate is not possible with the wrappers. This could be possible only if you initialize your PanelBar from Html which have these Ids set.

Persisting the PanelBar state is not supported out-of-the-box and the approach you took is the right one.

I would suggest you to share your suggestions in our Kendo User Voice page where more people can vote for your these ideas about improving the PanelBar widget.

Kind regards,
Petur Subev
the Telerik team

[Martin]

I will make a suggestion in the User Voice, as you suggest. However, you did not address my question about why there is an empty SPAN element when generated by the HtmlHelper and instead the name is in the <a> element.

[Petur Subev]

Hello again,

The span element role is to be an icon. The following code :

@(Html.Kendo().PanelBar()
     .Name("Accordion")
     .ExpandMode(PanelBarExpandMode.Single)
     .Items(panelbar =>
     {
        panelbar.Add().Text("Searching")
              .HtmlAttributes(new { id = "Searching" })
            .Content("Text for simplicity")
            .Expanded(true);
        panelbar.Add().Text("Invoice")
            .Content(
                @<text>
                <div id="Invoice" />
                </text>);
    })

Generates the following final html:

<li class="k-item k-state-active k-first k-state-highlighted" id="Searching" role="menuitem"
    aria-expanded="true" aria-hidden="false"><a class="k-link k-header" href="#Accordion-1">
        Searching<span class="k-icon k-i-arrow-n k-panelbar-collapse"></span></a><div class="k-content"
            id="Accordion-1" role="region" aria-hidden="true" style="display: block;">
            Text for simplicity</div>
</li>

Where as you can see the span is the icon and it is supposed to remain empty.

Regards,
Petur Subev
the Telerik team