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. Image for the cookie policy date

Grid CustomToolbarItem background color change on hover


where can I disable the background color change on mouse hover over the imagebutton I placed in the customtoolbaritem of the grid?

10 Replies

AS Abinaya Subbiah Syncfusion Team June 15, 2016 07:05 AM UTC

Hi Pratura, 

Thanks for contacting Syncfusion support. 

We can change the tool bar item hover color by override the existing  class with list item id. Please refer to below code snippet. 

<style type="text/css" class="cssStyles"> 
  .e-toolbar > .e-horizontal .e-hover#Grid_Expand // Toolbar list item id 
        background: none; 
        border-color: transparent; 
<script type="text/javascript"> 
        $(function () { 
                toolbarSettings: { showToolbar: true,customToolbarItems:["Expand"], toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 
                . . . . . 

Abinaya S 

PR Pratura June 15, 2016 08:36 AM UTC

Thank you.

That worked.
I am adding my own custom buttons to toolbar but they render off.
In the attachment is how it looks on the toolbar with your native excel export button and my imagebutton (14px -it looks similar to your add button)

But i can't seem to get it on the middle and the background color to be as your buttons.

This is the code:

   <ej:CustomToolbarItem TemplateID="#Add" />

<script id="Add" type="text/x-jsrender">
         <asp:UpdatePanel runat="server">
                 <asp:ImageButton OnClientClick="openDialog()" ID="ImageButtonAdd" ImageUrl="~/_COMMON/Images/Add16.png" runat="server" />                 

Attachment: Add_83c3fb1a.7z

AS Abinaya Subbiah Syncfusion Team June 16, 2016 12:48 PM UTC

Hi Pratura, 

We have analyzed your requirement. Please find reason for positioning and background color not proper for button in toolbar. 

  1. By default we have SVG icons in toolbar items and but in your case you have used image hence our CSS might not affected it.
  2. When adding the image you need to set the background color it, since Grid uses SVG icons they are not needed.

So please use custom CSS for your button and image background color to adjust within the container.  

Please revert us if you have any further assistance on this. 

Abinaya S 

PR Pratura June 17, 2016 09:28 AM UTC

Thank you 

I used it like this:

                <ej:CustomToolbarItem TemplateID="#Add" />

<style type="text/css" class="cssStyles">
  .add:before {
  content: url("/_COMMON/Images/Add16.png");


 <script id="Add" type="text/x-jsrender">
        <a onclick="openDialog();return false" class="e-toolbaricons e-icon add" />
  function openDialog() {

IR Isuriya Rajan Syncfusion Team June 20, 2016 12:11 PM UTC

Hi Pratura,  
We have analyzed your provided code and  we have achieved by using custom css for PNG Icons. By default we have used SVG icons for our sample which adapting the  height and width for Grid toolbar. If we wants to use the other than SVG icons ,we need to set height and width manually for  icons because in PNG has different size of dimension.  Below sample we have used png icon and set css by using  this “.add:before  class also disable the icon hover css.  
Please refer the below code snippet: 
<style type="text/css" class="cssStyles"> 
  .add:before { 
    margin-left: -9px; 
    margin-top: -9px;// Toolbar icon 
    content: url("Images/holiday.png"); 
  .e-toolbar > .e-horizontal .e-hover#ctl00_MainContent_Grid1_Add 
        background: none; //prevented the default hover coloring  
        border-color: transparent;  
<ej:Dialog ID=”basicDialog” runat=”server” ShowOnInit=false Title=”Dialog”> 
            <DialogContent>// dialog content 
                <div class=”cnt”> 
                       Hi ,Welcome 
<ej:Grid ID=”Grid1”  AllowFiltering=”True” AllowPaging=”True”  
            runat=”server” AllowScrolling=”true” GridLines=”Vertical”> 
                <ej:Column Field=”OrderDate” HeaderText=”Order Date” Width=”100” TextAlign=”Right” Format=”{0:MM/dd/yyyy}” EditType=”Datepicker” />               
                <ej:Column Field=”Verified” EditType=”Boolean” Width=”80”></ej:Column> 
              <ToolbarSettings ShowToolbar=”True” ToolbarItems=”add,edit,delete,update,cancel”> 
                     <CustomToolbarItem>//Custom toolbar with template 
                       <ej:CustomToolbarItem TemplateID=”#Add” /> 
           function openDialog() {//open dialog while press the toolbar icon 
               var obj = $(“#<%=basicDialog.ClientID%>).ejDialog(“instance”) 

Please refer the below attached sample. 

Isuriya R 

SE Semper June 27, 2016 12:05 PM UTC

Thank you.

Actually, my previous post was success with the custom toolbar item.
I was just posting how I solved it.

But now, after updating to 14.2 version the refreshContent() does not render the grid anymore (it doesn't show it at all) 
Only if i comment out the   
  <ej:CustomToolbarItem TemplateID="#Add" /> 
Then it refreshes correctly, but that worked in previous version.

IR Isuriya Rajan Syncfusion Team June 28, 2016 07:04 AM UTC

Hi Pratura,   
We are unable to reproduce the issue so please revert us the modified sample based on your application along with the replication procedure.   
Please share the following details to find the cause of the issue,     
1.       Please provide the code snippet on how you have used refreshContent()?    
2.          Please provide the issue reproduced screenshot?   
3.          Check whether any script error occurs at developer tools console?   
Please find the video for your reference.   

Isuriya R 

PR Pratura June 28, 2016 12:09 PM UTC

1. Here is the code
 function refreshGrid() {
            var obj = $("#Grid1").ejGrid("instance");

Whether i call it from a button or the link from the grid toolbar it makes no difference
The refresh does not happen.

2. The screenshot is just a blank white page in the browser since i don't have any control other then the grid.
3. There are absolutely no script errors on the page

The update for this thread, other then this, is that now the refresh does not do anything regardless of the toolbar items.
Something changed and i don't know what.

If i put the alert below the refreshContent, the alert fires on the page, but the grid does not refresh.
And the second problem for the grid not rendering is linked to the other Thread i posted

PR Pratura June 29, 2016 07:57 AM UTC


I have removed the customtoolbar items and put the buttons for add, refresh etc in the updatepanel where the grid is.
Now everything works.
I will not use the customtoolbar.
Thank you for your help.

VA Venkatesh Ayothi Raman Syncfusion Team June 29, 2016 11:40 AM UTC

Hi Pratura, 

Thanks for the update. 

The reported issue was reproduced in previous version ( only when using custom toolbar items in Grid. So, please ensure your version. If you are using old version of Essential studio then upgrade to the Latest version of Essential studio from the following link,   

Refer the following steps to upgrade your project to our latest version. 
1. Please download and Install the Essential Studio latest version. 
2. Replace the Syncfusion latest version scripts and CSS in your project from the following location. 
Scripts and CSS: [installed Location]\Syncfusion\Essential Studio\XX.X.X.XX\JavaScript\assets 
3. We have listed the required Namespaces, DLLs, script and CSS files to work with the ASP.Net MVC Control. So we need to replace all the following files as a latest one. 
Script files 
Syncfusion script files: 
External Script files: 
CSS files 
You can find the scripts and css files in the following locations: 
Script Location: [installed Location]\Syncfusion\Essential Studio\\JavaScript\assets\scripts\web   
CSS Location: [installed Location]\Syncfusion\Essential Studio\\JavaScript\assets\css\web   
DLL Location[installed Location]\Syncfusion\Essential Studio\\Assemblies   
4. Please refer to the latest version ( of required DLLs in your project and change the referred version in project Web.config file which is located under the project’s root directory.   
<compilation debug="true" targetFramework="4.5" > 
                <add assembly="Syncfusion.EJ, Version= 14.2400.0.26, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> 
                <add assembly="Syncfusion.EJ.Web, Version= 14.2400.0.26, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> 
5. Clear the browser cache, before you run the upgraded project.   

We are happy to hear that your requirement is achieved. 
Venkatesh Ayothiraman. 

Live Chat Icon For mobile
Up arrow icon