Panel Bar like menu?

[Pierre]

De we have a way to user Panel bar like a menu?
I try to pass some parameters in my PanelItem to ba able to react in the Select event.
I use MVC like this:

@(Html.Kendo().PanelBar()
    .Name("Navigation")
    .ExpandMode(PanelBarExpandMode.Single)
    .Events(events => events
        .Select("OnMenuSelect"))
    .HtmlAttributes(new { style = "width: 200px;" })
    .BindTo(Model, mappings =>
    {
        mappings.For<umbBaultar.Models.Shared.MenuItemModel>(binding => binding
            .ItemDataBound((item, MenuItemModel) =>       {
                item.Text = MenuItemModel.Nom;
            })
            .Children(MenuItemModel => MenuItemModel.SousMenu));
    })
)

I whan to add more information provided in my MuniItemModel like (Url, group) than retrive it in my OnMenuSelect.
Any Suggestion?

[Ignacio]

Sure you can easily add extra data to each menu element and then retrieve it on your "OnMenuSelect" callback.

Here's a sample:

First add the extra data to your elements via HtmlAttributes method.

<div class="demo-section">

    <h3>PanelBar</h3>

    @(Html.Kendo().PanelBar().Events(events => events.Select("OnMenuSelect"))
        .Name("panelbar-images")
        .Items(panelbar =>
        {
            panelbar.Add().Text("Baseball")
                .Items(baseball =>
                {
                    baseball.Add().Text("Top News").HtmlAttributes(new { data_url = "http://www.google.com", data_group = "top news group" });
                    baseball.Add().Text("Photo Galleries");
                    baseball.Add().Text("Video Records");
                    baseball.Add().Text("Radio Records");
                });

        })
    )
</div>

And then you can get that extra data on the Select callback.

<script type="text/javascript">
    function OnMenuSelect(a) {
        var item = $(a.item);
        if (item.data("group")) {
            alert(($(a.item).data("group")));
            alert(($(a.item).data("url")));
        }
    }

</script>

Hope this helps.

[Pierre]

Thanks for reply.
I am quite new to KendoMVC. Like you see in my code, I am binding on a IEnumarable with ".BindTo" and "Mappings".
In your code, you use the htmlAttrbutes to pass more data. How I can use this in a binding context?

thanks

[Ignacio]

Sure.
You just need to provide an ItemDataBound lambda to be able to specify extra html attributes upon the binding of the sub-menu-elements
 Here's a sample:

@(Html.Kendo().PanelBar()
    .Events(events => events.Select("OnMenuSelect"))
      .Name("panelbar")
      .BindTo(Model, mappings =>
       {
           mappings.For<KendoUIMvcApplication4.Models.MenuItemModel>(binding => binding
               .ItemDataBound((kendoMenuItem, menuItem) =>
                   {
                       kendoMenuItem.Text = menuItem.Nom;
                       //you can also add data to the top level menu item if you wish. Also by the HtmlAttributes property.
                   })
               .Children(menuItem => menuItem.SousMenu));
           mappings.For<KendoUIMvcApplication4.Models.SubMenuItemModel>(binding =>
               binding
               .ItemDataBound((kendoSubMenuItem, subMenuItem) =>
                   {
                       kendoSubMenuItem.Text = subMenuItem.Nom;
                       kendoSubMenuItem.HtmlAttributes.Add("data-url", subMenuItem.Url);
                       kendoSubMenuItem.HtmlAttributes.Add("data-group", subMenuItem.Group);
                   }));
       })
)

Hope this helps.

[Pierre]

Thanks! All is working now