Customer Toolbar Icons not showing

[Peter]

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]

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, 

https://help.syncfusion.com/aspnet/grid/toolbar?cs-save-lang=1&cs-lang=html 

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, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/vbsample-1333289353.zip 

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

Regards, 

Padmavathy Kamalanathan