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

Show menu icons from local images?

Thread ID:

Created:

Updated:

Platform:

Replies:

150035 Dec 18,2019 12:18 PM UTC Dec 23,2019 10:48 AM UTC Blazor 4
loading
Tags: Menu Bar
Yordan
Asked On December 18, 2019 12:18 PM UTC

Hello.
Since I am unable to find inside the provided examples an example which shows how to setup menu items with icons from local images

- how to do that ?!

Arunkumar Devendiran [Syncfusion]
Replied On December 19, 2019 07:41 PM UTC

Hi Yordan, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your reported query and we suspect that your reported query is about place your local image in menu items icon. We have created the sample for your requirement, in that we have set the local image on our menu items icon. In our sample, images are saved in wwwroot folder in that way you can achieve this. Please refer the below sample link and we would inform you that we have already achieved that in our online demo sample. Please refer the below online demo link also. 
 
Sample Link: 
 
Online demo Link: 
 
Could you please check the above link and get back to us with more information if we misunderstood your requirement or need further assistance. 
 
Regards, 
Arunkumar D 


Yordan
Replied On December 20, 2019 08:44 AM UTC

Awesome example ! Thank You very much dear support !

Yordan
Replied On December 20, 2019 02:39 PM UTC

Just would like to report that if the datamodel contains a fields with lower case - then it will break the logic of the template.

Arunkumar Devendiran [Syncfusion]
Replied On December 23, 2019 10:48 AM UTC

Hi Yordan,  
  
Good day to you. 
 
We have checked your reported query and we suggest you to add model type as @typeof(CategoryModel)  in this way you can achieve your requirement. We have created the sample for your reported query in that we have using the lowercase on menu datamodel fields. Please refer the below code snippet and sample link, 
 
Index.razor 
 
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper; 
<div class="menu-control"> 
    <EjsMenu Items="@data" Fields="@MenuFields" ModelType=@typeof(CategoryModel)> 
        <MenuTemplates> 
            <Template> 
                @{ 
                    var MenuItems = (context as CategoryModel); 
                    if (@MenuItems.Category != null) 
                    { 
                        <div>@(@MenuItems.Category)</div> 
                    } 
                    else if (@MenuItems.value != null) 
                    { 
                        <div style="width: 100%;display: flex;justify-content: space-between;"> 
                            @{ 
                                if (@MenuItems.url != null) 
                                { 
                                    <img class="e-avatar e-avatar-small" src="@UriHelper.ToAbsoluteUri($"images/MenuBar/{MenuItems.url}.png")" /> 
                                } 
                                <span style="width:100%;">@MenuItems.value</span> 
                                if (@MenuItems.count != null) 
                                { 
                                    <span class="e-badge e-badge-success">@MenuItems.count</span> 
                                } 
                            } 
                        </div> 
                    } 
                    else 
                    { 
                        <div tabindex="0" class="e-card"> 
                            <div class="e-card-header"> 
                                <div class="e-card-header-caption"> 
                                    <div class="e-card-header-title">about Us</div> 
                                </div> 
                            </div> 
                            <div class="e-card-content"> 
                                @MenuItems.about 
                            </div> 
                            <div class="e-card-actions"> 
                                <input type="button" class="e-btn e-outline" style="pointer-events: auto;" value="Read More" /> 
                            </div> 
                        </div> 
                    } 
                } 
            </Template> 
        </MenuTemplates> 
    </EjsMenu> 
</div> 
@code { 
 
    CategoryModel MenuTemplate = new CategoryModel(); 
    private List<CategoryModel> 
   data = new List<CategoryModel> 
       { 
        new CategoryModel { 
        Category = "Products", 
        Options = new List<CategoryModel> 
{ 
            new CategoryModel { value= "JavaScript", url= "javascript" }, 
            new CategoryModel { value= "Angular", url= "angular" }, 
            new CategoryModel { value= "ASP.NET Core", url= "core" }, 
            new CategoryModel { value= "ASP.NET MVC", url= "mvc" } 
            } 
            }, 
            new CategoryModel{ 
            Category = "Services", 
            Options = new List<CategoryModel> 
    { 
                new CategoryModel { value= "Application Development", count= "1200+" }, 
                new CategoryModel { value= "Maintenance & Support", count= "3700+" }, 
                new CategoryModel { value= "Quality Assurance" }, 
                new CategoryModel { value= "Cloud Integration", count= "900+" } 
                } 
                }, 
                new CategoryModel{ 
                Category = "about Us", 
                Options =  new List<CategoryModel> 
        { 
                    new CategoryModel{ 
                    id = "about", 
                    about = "We are on a mission to provide world-class best software solutions for web, mobile and desktop platforms. Around 900+ applications are desgined and delivered to our customers to make digital & strengthen their businesses." 
                    } 
                    } 
                    }, 
                    new CategoryModel { Category = "Careers" }, 
                    new CategoryModel { Category = "Sign In" } 
                               }; 
    MenuFieldSettings MenuFields = new MenuFieldSettings() 
    { 
        Text = new string[] { "Category", "value" }, 
        Children = new string[] { "Options" } 
    }; 
    private class CategoryModel 
    { 
        public string Category { get; set; } 
        public List<CategoryModel> 
            Options 
        { get; set; } 
        public string value { get; set; } 
        public string url { get; set; } 
        public string count { get; set; } 
        public string id { get; set; } 
        public string about { get; set; } 
        public string iconCss { get; set; } 
    } 
} 
 
 
 
 
Sample Link: 
 
Could you please check the above link and get back to us with more information if we misunderstood your requirement or need further assistance.  
  
Regards,  
Arunkumar D 


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