Panelbar as Sidebar navigation

4 posts, 1 answers
  1. Arun Perregattur
    Arun Perregattur avatar
    3 posts
    Member since:
    Sep 2017

    Posted 06 Oct 2017 Link to this post

    Hi,

    I am trying to use Panelbar as a Side bar navigation (something like Outlook).

    I have the Model this way.

    public class NavbarMainMenuModel
    {
        public int Dept_id { get; set; }
        public int Seq_no { get; set; }
        public string Dept_name { get; set; }
        public List<NavbarMenuItem> Items { get; set; }
    }
    public class NavbarMenuItem
    {
        public int Menu_item_id { get; set; }
        public int Seq_no { get; set; }
        public int Dept_id { get; set; }
        public string MenuName { get; set; }
    }

     

    Now, I want to load the Panel bar with this data.

    Currently, I have this code and it only display the top level items but not the children.

     

    <div id="responsive-panel" style="width:200px;">
        @(Html.Kendo().PanelBar()
                .Name("panelbar")
                .ExpandAll(false)
                .ExpandMode(PanelBarExpandMode.Multiple)
                .DataTextField("Dept_name")
                .DataSource(ds=>ds
                    .Read(read=>read.Action("GetMainMenuItems","Home"))
                    )
                .Events(e=>e
                .Select("panelbarselected")
                )
        )
    </div>

     

    How do I get the Main list and sub items display on the PanelBar?

    Also, i need to display them in the right sequence (if possible).

     

    Thanks,

    Arun

     

     

  2. Arun Perregattur
    Arun Perregattur avatar
    3 posts
    Member since:
    Sep 2017

    Posted 10 Oct 2017 Link to this post

    No response?

     

  3. Answer
    Nencho
    Admin
    Nencho avatar
    1686 posts

    Posted 10 Oct 2017 Link to this post

    Hello Arun,

    In order to achieve the desired functionality, you should slightly change the implementation for your ItemModel class (NavbarMainMenuModel). You would need to have it inherited from the IHierarchicalItem. This will require adding some additional fields, namely Expanded, HasChildren and Id. The HasChildren field is extremely important, because it will make the PanelBar aware of the child items of each node. 

    So, your model should look like this:

    public class NavbarMainMenuModel : IHierarchicalItem
    {
        public string Id { get; set; }
        public bool Expanded { get; set; }
        public int Seq_no { get; set; }
        public string Dept_name { get; set; }
        public List<NavbarMainMenuModel> Items { get; set; }
        public bool HasChildren { get; set; }
    }

    And your PanelBar configuration as below:

    @(Html.Kendo().PanelBar()
            .Name("panelbar")
            .ExpandMode(PanelBarExpandMode.Multiple)
            .DataTextField("Dept_name")
            .LoadOnDemand(true)
            .DataSource(ds => ds
                .Read(read => read.Action("GetMainMenuItems", "Home"))
                .Model(m=>m.HasChildren("HasChildren").Children("Items"))
                )
            .Events(e => e
            .Select("panelbarselected")
            )
    )


    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Arun Perregattur
    Arun Perregattur avatar
    3 posts
    Member since:
    Sep 2017

    Posted 10 Oct 2017 in reply to Nencho Link to this post

    Thank you, that worked!
Back to Top