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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Separate icons for each parent id in menu

Thread ID:

Created:

Updated:

Platform:

Replies:

124623 Jun 18,2016 05:02 PM UTC Jun 30,2016 08:50 AM UTC ASP.NET MVC 9
loading
Tags: Menu
Carlos Palomino
Asked On June 18, 2016 05:02 PM UTC

Dear,
How I can add separate icons for each parent id in menu?

Greetings.

Keerthana Rajendran [Syncfusion]
Replied On June 20, 2016 06:00 AM UTC

Hi Carlos, 

We have prepared a sample in MVC to add icons for parent id in menu. Please refer the below given link 


1.Add sprite class to parent menu  

<code> 
menu.Add(new MenuJson { pid = 1, mtext = "India", parent = null, sprite = "flag-in" }); 
</code> 

2.Inside <style>tag add background image and position for each sprite class added 

<code> 
  [class^="flag-"], 
    [class*="flag-"] { 
        background-image: url("../Content/images/Menu/flags.png"); 
        height: 14px; 
        left: 2px; 
        top: 4px; 
        width: 24px; 
         
    } 
   

.flag-in { 
        background-position: -125px -30px; 
    } 

</code> 


Regards, 
Keerthana. 
 


Carlos Palomino
Replied On June 20, 2016 02:46 PM UTC

Hello such.
How do I add an image individually to each parent?

Greetings.

Keerthana Rajendran [Syncfusion]
Replied On June 21, 2016 06:50 AM UTC

Hi Carlos,   
 You can add an image individually by using SpriteCssClass   
   
1.Add sprite class to each parent element   
   
<code>   
   
menu.Add(new MenuJson { pid = 1, mtext = "India", parent = null, sprite = "flag-in" });   
</code>   
   
  
   
2.Define separate css for each sprite class in order to position the icon correctly   
   
<style>   
  .flag-in {   
        background-imageurl("../Content/images/Menu/en_IN_flag.png");   
        background-position-126px -30px;   
        height:13px;   
        width:18px;   
    }   
</style>   
  
   
We have prepared a sample in which we have used a single image for each parent and applied css individually for each icon. Please refer the below given link.   
   
  
Please let us know if any concern.   
   
Regards,   
Keerthana.   
 


Carlos Palomino
Replied On June 21, 2016 02:20 PM UTC

Thanks for the answers.
But what I want is to add a different alongside the name of each parent id image, but that is dynamic and not declare each value of sprite:

 Controller:

 public ActionResult MenuFeatures()
        {
            menu.Add(new MenuJson { pid = 1, mtext = "India", parent = null, sprite = "flag-in" });
            menu.Add(new MenuJson { pid = 2, mtext = "Canada", parent = null, sprite = "flag-cn" });
            menu.Add(new MenuJson { pid = 3, mtext = "US", parent = null, sprite = "flag-us" });
            menu.Add(new MenuJson { pid = 4, mtext = "Argentina", parent = null, sprite = "flag-ag" });
            menu.Add(new MenuJson { pid = 5, mtext = "Belgium", parent = null, sprite = "flag-bg" });


View:

.e-menu li > ul > li > a {
        padding: 3px 24px 3px 35px;
    }

    .flag-cn{
         background-image: url("../Content/images/Menu/flag_icon_small.gif");
          background-position: -131px -18px;
          height:18px;
          width:25px;
    }

    
    .flag-in {
         background-image: url("../Content/images/Menu/en_IN_flag.png");
        background-position: -126px -30px;
         height:13px;
          width:18px;
    }

Greetings.

Keerthana Rajendran [Syncfusion]
Replied On June 23, 2016 09:28 AM UTC

Hi Carlos, 

We have prepared a sample in which we added icons to parent menu dynamically on button click. When button is clicked icons will be added to corresponding menu item. We have prepared a sample based on our understanding of your requirement. Please refer the below given sample link. 


Note: You can add icons to parent menu dynamically by appending the span class to the corresponding parent menu. If this doesn’t meet your requirement ,please revert with clear scenario of your requirement  
 
Regards, 
Keerthana. 


 


Carlos Palomino
Replied On June 23, 2016 08:20 PM UTC

Dear,
What I want is to generate a dynamic menu, but the image of each parent should not be declared as the example:

  #menujson {
         margin-left: 50px;
     }

     .e-menu li> ul> li> a {
         padding: 3px 3px 24px 35px;
     }

     {.flag-cn
          background-image: url ("../ Content / images / Menu / flag_icon_small.gif");
           background-position: -18px -131px;
           height: 18px;
           width: 25px;
     }

    
    .flag-in {
          background-image: url ("../ Content / images / Menu / en_IN_flag.png");
         background-position: -30px -126px;
          height: 13px;
           width: 18px;
     }

Greetings.

Keerthana Rajendran [Syncfusion]
Replied On June 27, 2016 10:11 AM UTC

Hi Carlos,   
Thanks for the update.   
 Yes, we can add the any image to menu items while sending the data list to menu component by using imageUrl property. With the help of this property, you don’t need to pre-define/declare any CSS classes earlier; by passing the image URL to dataSource property with proper field mapping.    
    
<code>   
  
  menu.Add(new MenuItem { id = 1, mtext = "India", parent = null   
                 imageURL = "../Content/images/Menu/en_IN_flag.png" });   
</code>   
    
We have prepared a sample based on this. Please refer the below given sample link:   
  
If we misunderstood your requirement, please provide us a sample about your scenario henceforth we could give you appropriate solution ASAP.   
  
Please let us know if any concerns.    
  
Regards,   
Keerthana.   
 


Carlos Palomino
Replied On June 29, 2016 07:50 PM UTC

Thank you very much for the answers.

Keerthana Rajendran [Syncfusion]
Replied On June 30, 2016 08:50 AM UTC

Hi Carlos, 
  
Thank you for your update. Please get back to us if you have further queries we will be happy to assit you 
  
Regards, 
Keerthana. 


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.

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

;