We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Sidebar Menu Demo

Thread ID:

Created:

Updated:

Platform:

Replies:

141331 Dec 6,2018 09:59 AM UTC Dec 11,2018 05:43 AM UTC ASP.NET Core - EJ 2 6
loading
Tags: Sidebar
danacon
Asked On December 6, 2018 09:59 AM UTC

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 [Syncfusion]
Replied On December 7, 2018 11:20 AM UTC

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:  
 
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:  
  
Please check the sample and get back to us if you have any further queries.  
 
Regards,  
Deepa L. 


danacon
Replied On December 7, 2018 12:09 PM UTC

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
Replied On December 7, 2018 03:13 PM UTC

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 [Syncfusion]
Replied On December 10, 2018 11:32 AM UTC

 
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. 
 
 
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. 
 
 
Thanks,  
Deepa L. 


danacon
Replied On December 10, 2018 03:35 PM UTC

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 [Syncfusion]
Replied On December 11, 2018 05:43 AM UTC

Hi Dan, 
 
Most welcome. Please get back to us in case of any further queries. 
 
Regards,  
Deepa L. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon