Panelbar as Sidebar navigation

[Arun Perregattur]

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

 

 

[Arun Perregattur]

No response?

 

[Nencho]

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

[Arun Perregattur]

Thank you, that worked!