Panel Bar like menu?

5 posts, 1 answers
  1. Pierre
    Pierre avatar
    260 posts
    Member since:
    Apr 2007

    Posted 04 Oct 2013 Link to this post

    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?
  2.
  3. Ignacio
    Ignacio avatar
    46 posts
    Member since:
    Feb 2013

    Posted 07 Oct 2013 Link to this post

    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.

  5. Pierre
    Pierre avatar
    260 posts
    Member since:
    Apr 2007

    Posted 08 Oct 2013 Link to this post

    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
  7. Answer
    Ignacio
    Ignacio avatar
    46 posts
    Member since:
    Feb 2013

    Posted 08 Oct 2013 Link to this post

    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.
  8.
  9. Pierre
    Pierre avatar
    260 posts
    Member since:
    Apr 2007

    Posted 08 Oct 2013 Link to this post

    Thanks! All is working now
Back to Top