[Solved] PanelBar Item Value

[Brian Mains]

Hello,

Is there a way to store a value associated with a PanelBarItem object?  I don't see one....

Thanks.

[Atanas Korchev]

Hello Brian Mains,

Currently you can use an html attribute to associate a simple string value with your panelbar item:

<%= Html.Telerik().PanelBar()
        .Name("PanelBar")
        .Items(items =>
        {
            items.Add().
                 .Text("Item1")
                 .HtmlAttributes(new {id = "value"});
        }
%>           

Let us know if you need to achieve something different.

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Brian Mains]

Hey,

I have a key I want to keep associated to the PanelBarItem.  So that when the user clicks on the panel bar item, I can extract the key later.  I guess I could add it as an attribute, though I don't want to store it as an ID...

But that's what I want to achieve; I have a list of users in the panel bar, and when the select the users they want to interact with, I want to be able to access the keys for that user.  But I don't want the key to be visible.

What would you recommend for this?

Thanks.

[Atanas Korchev]

Hi Brian Mains,

Do you want to use the key on client or server side?

For server side access you can use the Action overload which accepts route values and specify the key there:

items.Add().Text("Item 1").Action("Index", "Home", new { key = "value"});

For client-side access you need to use the HtmlAttributes. I picked the id at random - you can use any other valid or custom HTML attribute. It would be rendered for the <li> tag which represents a panel item.

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[John Brogdon]

I am trying to do the same thing, but will read the value client side with the "onSelect" java script function. I am Binding to a hierarchical model. Where/how can I set the ID?

            <% Html.Telerik().PanelBar()
                   .Name("BrowsePanel")
                   .HtmlAttributes(new { style = "width: 250px;"})
                   .ExpandMode(PanelBarExpandMode.Single)
                   .BindTo(Model.Categories, mappings =>
                   {
                       mappings.For<ProductCategory>(binding => binding
                               .ItemDataBound((item, category) =>
                               {
                                   item.Text = category.Name;
                                   item.HtmlAttributes = category.ID; //Where can I set the ID???

                               })

                               .Children(category => category.ProductCategories)
                               );
                   })
                 .ClientEvents(events => events.OnSelect("onSelect"))
                 .SelectedIndex(1)
                 .Render();
            %>

[Brian Mains]

John,

I think you do something like:

item.HtmlAttributes(new { category = category.ID })

So that you can retrieve it as a category attribute on the client HTML element.

[Anand Chua]

I'm also looking for the best solution to set ID and get item ID from client script.
Here is my way of doing so:

mappings.For<ProductCategory>(binding => binding

.ItemDataBound((item, category) =>

{

item.Text = category.Name;

item.HtmlAttributes.Add("value", category.ItemID );

})

.Children(category => category.ProductCategories)

);

In javascript :
function fctOnSelect(e) {
        var vItem = $(e.item);
        var vItemID = vItem.attr('value');
        alert('OnSelect :: ID : ' + vItemID);
    }
Hope it help.

[Hernando]

Good afternoon Brian!
I have the following problem, I need to fill a PanelBar from the database, I have two tables, one in which they are the menu items and other such items are the menu options. therefore performedthe following query and performed in the
 index.aspx:

<%
Nomina.Models.NominaEntities BD = new Nomina.Models.NominaEntities();
IEnumerable<Nomina.Models.menuAplicacion> opciones = from a in BD.menuAplicacion
                                                         join b in BD.itemsAplicacion
                                                         on a.idmenu equals b.idmenu
                                                         where b.orientacion == "vertical"
                                                         select a;
 ViewData["menu"] = opciones;

 %>
<% Html.RenderPartial("menuConfiguracion"); %>

At the PartiaIView have the following code:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
 <p>CONFIGURACIÓN</p>

 <%= Html.Telerik().PanelBar()
             .Name("menuGeneral")
             .BindTo((IEnumerable<Nomina.Models.menuAplicacion>)ViewData["menu"], mappings =>
             {

                 mappings.For<Nomina.Models.menuAplicacion>(binding => binding
                   .ItemDataBound((item, itm) =>
                   {
                       item.Text = itm.descripcion;
                       item.ImageUrl = Url.Content(itm.icono);
                       item.ImageHtmlAttributes.Add("style", "margin-right: 10px");
                   })
                     .Children(itm => new[] { itm.itemsAplicacion })
                            .ItemDataBound((item, itm) =>
                            {
                                item.Text = itm.descripcion;
                                item.ImageUrl = Url.Content(itm.icono);
                                item.ImageHtmlAttributes.Add("style", "margin-right: 10px");
                                item.ActionName = itm.action;
                                item.ControllerName = itm.controller;
                            }));
             })
%>

but I am not generating the Childrens. attached table model