Sidebar Menu Demo

[danacon]

Hi,

I'd like to add a menu control to my web app, but I noticed that the sidebar demo uses a listview for a menu as opposed to the menu control. I am not an expert in layout and control use so it is not obvious to me why this is done (it may be standard practice for all I know or maybe the menu control doesn't work in a sidebar!).

Should I be using a listview or a menu in a sidebar menu?

If menu is ok, are there are pros/cons of using it versus the listview (in a menu scenario)?

And finally, (if menu is ok) is it easy to add a menu control to a sidebar or is there a sample somewhere (I did have a quick look but couldn't find anything)?

Thanks in advance

[Deepa Loganathan]

Hi Dan,  

 

Thanks for contacting Syncfusion support.  

 

We understood your concern about using Menu with Sidebar and we would like to let you know that EJ2 Sidebar can be integrated with any components. 

 

Query: Listview or Menu? 

 

Listview is a layout control to render the items as a list with built-in features such as grouping, sorting, templating, nested listview etc., while Menu can be rendered with multilevel sub-menu options. You can choose between Listview and Menu based on your application needs.  

 

To know more about the features available in Listview and Menu and the UI level differences visually, please check the below demo pages, where we have showcased the features of each components. 

 

Demo:  

https://ej2.syncfusion.com/demos/#/material/listview/default.html 

https://ej2.syncfusion.com/demos/#/material/menu/default.html  

 

For your convenience, we have prepared a sample with Side bar integrated with Menu control and is available for download under the following link.  

 

Sample Link:  

http://www.syncfusion.com/downloads/support/forum/141331/ze/sidebarMenu1862723673 

  

Please check the sample and get back to us if you have any further queries.  

 

Regards,  

Deepa L. 

[danacon]

Hi Deepa,

Many thanks for this, the sample especially is very useful!

It looks as though the listview with nesting achieves the same thing as the menu with sub-options so I guess there isn't really much of a difference in functionality in a menu scenario. It will probably come down to which looks better for me!

Thanks

Dan

[danacon]

Hi Deepa,

I have another question (on the listview this time) - how do you make each item of the listview a hyperlink/url?

I have read through the help section on this (https://ej2.syncfusion.com/aspnetcore/documentation/listview/how-to/#listview-with-hyper-link-navigation) and I understand about adding the url to the listdata viewbag, but I don't understand what to do with the achor_template (var anchor_template = "<a target='_blank' rel='nofollow' href='${url}'>${name}</a>";) to make it apply to the listview items.

Thanks

[Deepa Loganathan]

 

Hi Dan,

 

Thanks for the update. 

Essentially when we pass the Datasource to the Listview (without any template) it will simply proceed to render the default Listview with Datasource content. So, in your case, you want to render the Listview with navigation anchor tag. 

 

To achieve this, you need to utilize the template property to customize the default appearance and add more functionality to the Listview.  

 

 Listview Template 

 

 

var anchor_template = "<a target='_blank' rel='nofollow' rel='nofollow' href='${url}'>${name}</a>"; 

 

 

DataSource 

 

 

     

    List<object> listdata = new List<object>(); 

 

    listdata.Add(new { name = "Google", url = "https://www.google.com" }); 

 

 

 

By using the template with an anchor tag and binding it with a Datasource that contains the hyperlinks to your pages and you can render a Listview with hyperlinks. Please check out the below help page to know more about using templates in Listview to customize the List items as per your application needs. 

 

https://ej2.syncfusion.com/aspnetcore/documentation/listview/customizing-templates  

 

There was an issue in the documentation website, so currently it is not showing the view page code snippet (only controller code snippet is showing). We have fixed it internally and will be rolled out in the next release, thanks for your patience until then. 

 

For now, we have attached the view and controller pages of our application to achieve your requirement. 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/141331/ze/view_controller569721297  

 

Thanks,  

Deepa L. 

[danacon]

Thanks Deepa, yes it was this bit in the view I was missing:-

template="@anchor_template"

Now I have seen this I understand how it is all wired together, many thanks :)

[Deepa Loganathan]

Hi Dan, 

 

Most welcome. Please get back to us in case of any further queries. 

 

Regards,  

Deepa L.