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

Customer Toolbar Icons not showing

Thread ID:

Created:

Updated:

Platform:

Replies:

151382 Feb 10,2020 07:27 AM UTC Feb 11,2020 09:16 AM UTC ASP.NET Web Forms 1
loading
Tags: Grid
Peter
Asked On February 10, 2020 07:27 AM UTC

Dear,

I use VB.NET Web Forms.

As per your example on https://help.syncfusion.com/aspnet/grid/toolbar#custom-toolbar-items i've added some customer toolbar items on my Grid's toolbar. The items show up empty and have no icons. I can click them and the events are fired.

When I try to use glyphicons, it gives the same result.

Grid:
    <ej:Grid ID="dgOrders" runat="server" DataSourceCachingMode="None" DataSourceID="dsOrders" EnableLoadOnDemand="False" Locale="nl-BE" MinWidth="0">
        <Columns>
            <ej:Column Field="OrderID" DataType="number" AllowEditing="False" IsIdentity="True" IsPrimaryKey="True"></ej:Column>
            <ej:Column Field="PurchaseOrderNumber" DataType="string"></ej:Column>
            <ej:Column Field="LoadDate" DataType="date"></ej:Column>
            <ej:Column Field="UserID" DataType="number"></ej:Column>
        </Columns>
        <EditSettings AllowEditing="true" AllowAdding="false" AllowDeleting="true" />
        <ToolbarSettings ShowToolbar="True" ToolbarItems="delete,cancel,update,search,printGrid,excelExport">
            <CustomToolbarItem>
                <ej:CustomToolbarItem Text="Print Labels" TemplateID="#PrintLabels" />
                <ej:CustomToolbarItem Text="Print Delivery Notes" TemplateID="#PrintDelNotes" />
            </CustomToolbarItem>
        </ToolbarSettings>
         <ClientSideEvents ToolbarClick="toolBarClick" />
    </ej:Grid>
Scripts:
    <script id="PrintLabels" type="text/x-jsrender">
            <a class="e-toolbaricons refresh" />
    </script>
    <script id="PrintDelNotes" type="text/x-jsrender">
            <a class="e-toolbaricons refresh"" />
    </script>
    <script type="text/javascript">
        function toolBarClick(sender) {
            alert(sender.itemName);
            if (sender.itemName == "Print Labels") {
                
            };
            if (sender.itemName == "Print Delivery Notes") {

            };
        }
    </script>
Head in master page:
    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link rel='nofollow' href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <link rel='nofollow' href="https://cdn.syncfusion.com/17.3.0.27/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <script src="https://cdn.syncfusion.com/js/assets/external/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
    <script src="https://cdn.syncfusion.com/js/assets/external/jquery.validate.min.js"></script>
    <script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="https://cdn.syncfusion.com/17.3.0.27/js/web/ej.web.all.min.js"></script>
    <script src="https://cdn.syncfusion.com/17.3.0.27/js/common/ej.webform.min.js"></script>
    <script src="https://cdn.syncfusion.com/js/assets/i18n/ej.culture.nl-BE.min.js"></script>

    <%:Styles.Render("~/Content/bootstrap.min.css") %>
    <link rel='nofollow' href="Content/cookiealert.css" rel="stylesheet" />

    <link rel='nofollow' href="Content/Site.css" rel="stylesheet" />
    <link rel='nofollow' href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css" />

    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/cookiealert.js"></script>

Padmavathy Kamalanathan [Syncfusion]
Replied On February 11, 2020 09:16 AM UTC

Hi Peter, 

Thanks for contacting Syncfusion Forums. 

QUERY: Custom toolbar icons not showing 
 
From your query we understand that you are using custom toolbar but the icons have not been loaded properly.  
 
Please check the below help documentation, 

In the custom toolbar code snippet provided in the above link, we have custom toolbar with templateID as “Refresh”. Inside the template definition, we have added classname “e-toolbaricons”. For this class name we have added background image in css level (inside style tag). Similarly , you need to set template id, add class name to it inside template definition and set image for that class. 
 
Please check the below code snippet, 

<head runat="server"> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title><%: Page.Title %> - My ASP.NET Application</title> 
        ----------- 
   <link rel='nofollow' href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
   <link rel="stylesheet" rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
    ------- 
</head> 
 

        <ej:Grid ID="sfGrdIndexFields" AllowPaging="True" runat="server" ClientIDMode="AutoID"> 
              <ClientSideEvents ToolbarClick="onToolBarClick" /> 
                <ToolbarSettings ShowToolbar="true"> 
                    <CustomToolbarItem> 
                        <ej:CustomToolbarItem TemplateID="#Refresh" /> 
                        <ej:CustomToolbarItem TemplateID="#Search" /> 
                    </CustomToolbarItem> 
                </ToolbarSettings> 
         </ej:Grid> 
 
 
     <script id="Refresh" type="text/x-jsrender"> 
            <a class="e-toolbaricons refresh" /> 
        </script> 
<script id="Search" type="text/x-jsrender"> 
             <span class="glyphicon glyphicon-search" style="padding-top:3px"></span>  
        </script> 
        <script type="text/javascript"> 
            function onToolBarClick(sender) { 
                 ------- 
            } 
        </script> 
 
   <style type="text/css" class="cssStyles"> 
            .refresh { 
                background-position: -76px 3px; 
            } 
            .e-toolbaricons { 
                background-image: url("../Content/images/Grid/icons-gray.png"); 
            } 
        </style> 


In the above code snippet, we have two custom toolbar items with templateID “Refresh” and “Search”. For “Refresh”, we have added class name “e-toolbaricons” and added image “icon-gray” to this class. For “Search” template, we have added glyphicon by adding class name “glyphicon glyphicon-search” to the template and referring glyphicon stylesheet in the project. 

Please check the below screenshot, 
 

In your code, we could see that you have set two templateID “PrintLabels” and “PrintDelNotes”. You have added same class names “e-toolbaricons refresh” to both of the template. But we couldn’t see any code which adds image to those class names. We suggest you to set background-images for those classes as mentioned in the help documentation. Or you could refer glyphicon stylesheet link in your project and add glyphicon’s class name in the template for displaying icons in the custom toolbar. 

Please check the below sample, 

If you have further queries, please get back to us. 

Regards, 
Padmavathy Kamalanathan 



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