This is a migrated thread and some comments may be shown as answers.

Panelbar as Sidebar navigation

3 Answers 273 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Arun Perregattur
Top achievements
Rank 1
Arun Perregattur asked on 06 Oct 2017, 03:38 PM

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

 

 

3 Answers, 1 is accepted

Sort by
0
Arun Perregattur
Top achievements
Rank 1
answered on 10 Oct 2017, 01:08 PM

No response?

 

0
Accepted
Nencho
Telerik team
answered on 10 Oct 2017, 02:39 PM
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.
0
Arun Perregattur
Top achievements
Rank 1
answered on 10 Oct 2017, 08:10 PM
Thank you, that worked!
Tags
PanelBar
Asked by
Arun Perregattur
Top achievements
Rank 1
Answers by
Arun Perregattur
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or