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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Menu elements customization

Thread ID:

Created:

Updated:

Platform:

Replies:

141707 Dec 29,2018 03:01 AM UTC Jan 5,2019 08:42 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: Menu Bar
Toni
Asked On December 29, 2018 03:01 AM UTC

Hello
I'm trying to develop a menu for my site and I'd like to apply some customization to the menu elements.
The most important one is the alignment (right) but Id also like to change color or font.
Can I also define the controller, action and parameters instead of the url?
Thanks

Silambarasan I [Syncfusion]
Replied On January 3, 2019 04:10 PM UTC

Hi Toni, 
 
Thank you for contacting Syncfusion support. 
 
Query #1:  Alignment (right) but Id also like to change color or font. 
 
We have checked your reported requirement to change color or font and it can be achievable in our EJ2 Menu by using the ‘cssClass’ property. By using cssClass, we can apply color and font style for menu elements as like as below. 
 
CSHTML: 
 
   <ejs-menu id="menu" cssClass="customCss" items="ViewBag.data" fields="ViewBag.menuFields" select="onSelect"></ejs-menu> 
 
<style> 
.customCss ul.e-menu { 
    font-style: italic; 
    color: blue; 
} 
</style> 
 
Before we proceed further, we would like to know whether you want to align the Menu in right side of your page or you want render menu in right to left direction. 
 
 
 
Query #2 : Can I also define the controller, action and parameters instead of the url? 
 
Yes, your requirement can be achievable in our EJ2 Menu by setting the action, parameter, and controller argument in the Menu datasource and navigate to particular action by using ‘select’ client-side event as like as below.  
 
CSHTML: 
 
   <ejs-menu id="menu" cssClass="customCss" items="ViewBag.data" fields="ViewBag.menuFields" select="onSelect"></ejs-menu> 
 
<script> 
     
function onSelect(args) { 
    if (args.item.action) 
        window.location.rel='nofollow' href = window.location.rel='nofollow' href + "/" + args.item.controller + "/"+args.item.action + "?name=" + args.item.parameter; // Set the URL 
} 
</script> 
 
C#: 
 
   List<object> data = new List<object>() { 
    new { 
        header = "Events", 
        subItems = new List<object>() { 
            new { text= "Conferences", action = "conference", parameter = "conferenceName", controller = "Home"}, 
            new { text= "Music", action = "music", parameter = "instrumentName", controller = "Home" }, 
            new { text= "Workshops" } 
        } 
    }, 
    // .. 
}; 
 
For your convenience, we have prepared a sample to demonstrate your scenario (check with sub items from Events menu item). Please find the link below. 
 
Demo sample: 
 
 
Local sample: 
 
 
Could you please check the above sample & links and get back to us if we misunderstood your requirement or if you need any further assistance on this? 
 
Regards, 
Silambarasan 


Toni
Replied On January 4, 2019 12:15 AM UTC

Hi Silambarasan, thanks for your answers.
None of those options for question #1 are what I was looking for... I'm sorry if I didn't explain enough.
Here's a typical sample menu when you create a solution in Visual Studio:

As you can see, in the menu there are elements that are aligned to the left and others that are aligned to the right. You can also see how the home menu option has a different font color and weight. 
This is what I wanted to do.
In fact, your Toolbar control have the chance to custimize the elements in the way I was expecting.... but it seems to have only one menu control as child.

And, finally, for question #2, I'm ok with your answer.
Thanks again



Silambarasan I [Syncfusion]
Replied On January 5, 2019 08:42 AM UTC

Hi Toni, 
 
Thank you for your update. 
 
We would like to let you know that your requirement has been achievable by using ‘template’ property in Menu component. Please refer the below hosted demo sample and local sample. 
 
Hosted demo sample: 
 
Local sample: 
 
Could you please check the above sample and get back to us with more information if your requirement is not fulfilled or need further assistance on this? 
 
Regards, 
Silambarasan 


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