1. Home
  2. Forum
  3. ASP.NET MVC
  4. Separate icons for each parent id in menu

Separate icons for each parent id in menu

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

Greetings.

9 Replies
KR Keerthana Rajendran Syncfusion Team 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. 
 


CP Carlos Palomino June 20, 2016 02:46 PM UTC

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

Greetings.

KR Keerthana Rajendran Syncfusion Team 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-image: url("../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.   
 


CP Carlos Palomino 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.

KR Keerthana Rajendran Syncfusion Team 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. 


 


CP Carlos Palomino 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.

KR Keerthana Rajendran Syncfusion Team 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.   
 


CP Carlos Palomino June 29, 2016 07:50 PM UTC

Thank you very much for the answers.

KR Keerthana Rajendran Syncfusion Team 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. 


Loader.
Up arrow icon