Grid CustomToolbarItem background color change on hover

[Pratura]

Hi,

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

[Abinaya Subbiah]

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"> 

  .Expand:before 

 { 

    content:"\e627"; 

  } 

  .e-toolbar > .e-horizontal .e-hover#Grid_Expand {  // Toolbar list item id 

        background: none; 

        border-color: transparent; 

  }  

</style> 

<script type="text/javascript"> 

 

        $(function () { 

            $("#Grid").ejGrid({ 

                dataSource:window.dataSource, 

                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] }, 

                . . . . . 

       }); 

</script> 

 

Regards, 

Abinaya S 

[Pratura]

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">

             <ContentTemplate>

                 <asp:ImageButton OnClientClick="openDialog()" ID="ImageButtonAdd" ImageUrl="~/_COMMON/Images/Add16.png" runat="server" />                 

             </ContentTemplate>

          </asp:UpdatePanel>

    </script>

Attachment: Add_83c3fb1a.7z

[Abinaya Subbiah]

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. 

Regards, 

Abinaya S 

[Pratura]

Thank you 

I used it like this:

   <CustomToolbarItem>

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

            </CustomToolbarItem>

<style type="text/css" class="cssStyles">

  .add:before {

  margin-top:2px;

  content: url("/_COMMON/Images/Add16.png");

  }

</style>

 <script id="Add" type="text/x-jsrender">

        <a onclick="openDialog();return false" class="e-toolbaricons e-icon add" />

    </script>

   

  function openDialog() {

            $(".dlg").show()

            $("#dialog").ejDialog("open");  

        }

[Isuriya Rajan]

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;  

  }  

</style> 

 

 

<ej:Dialog ID=”basicDialog” runat=”server” ShowOnInit=false Title=”Dialog”> 

            <DialogContent>// dialog content 

                <div class=”cnt”> 

                       Hi ,Welcome 

                          </div> 

            </DialogContent> 

        </ej:Dialog> 

<ej:Grid ID=”Grid1”  AllowFiltering=”True” AllowPaging=”True”  

            runat=”server” AllowScrolling=”true” GridLines=”Vertical”> 

            <Columns> 

                <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> 

            </Columns> 

              <ToolbarSettings ShowToolbar=”True” ToolbarItems=”add,edit,delete,update,cancel”> 

                     <CustomToolbarItem>//Custom toolbar with template 

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

            </CustomToolbarItem> 

              </ToolbarSettings>         

        </ej:Grid> 

       <script> 

           function openDialog() {//open dialog while press the toolbar icon 

               var obj = $(“#<%=basicDialog.ClientID%>”).ejDialog(“instance”) 

               obj.open(); 

           } 

          </script> 

Please refer the below attached sample. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/New_Compressed_(zipped)_Folder_(2)1412610676.zip 

 

Regards, 

Isuriya R 

[Semper]

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   

<CustomToolbarItem>

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

</CustomToolbarItem> 

Then it refreshes correctly, but that worked in previous version.

[Isuriya Rajan]

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.   

Video: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Video-1103424580.zip 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/New_Compressed_(zipped)_Folder_(3)-2075841263.zip 

 

Regards, 

Isuriya R 

 

[Pratura]

1. Here is the code

 function refreshGrid() {

            var obj = $("#Grid1").ejGrid("instance");

            obj.refreshContent();

        };    

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

[Pratura]

Update:

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.

[Venkatesh Ayothi Raman]

Hi Pratura, 

Thanks for the update. 

The reported issue was reproduced in previous version (13.2.0.29) 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,   

 

Link: https://www.syncfusion.com/forums/124709/essential-studio-2016-volume-2-release-v14-2-0-26-is-available-for-download 

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. 

 

DLLs	Syncfusion.EJ.dll  Syncfusion.EJ.Web.dll
Script files	Syncfusion script files:  ej.web.all.min.js  ej.unobtrusive.min.js  External Script files:  jquery.min.js  jquery.easing.min.js  jsrender.min.js  jquery.validate.min.js
CSS files	ej.widgets.core.min.css

 

You can find the scripts and css files in the following locations: 

Script Location: [installed Location]\Syncfusion\Essential Studio\14.2.0.26\JavaScript\assets\scripts\web   

CSS Location: [installed Location]\Syncfusion\Essential Studio\14.2.0.26\JavaScript\assets\css\web   

DLL Location: [installed Location]\Syncfusion\Essential Studio\14.2.0.26\Assemblies   

4. Please refer to the latest version (14.2.0.26) 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.   

 [web.config] 

<compilation debug="true" targetFramework="4.5" > 

    <assemblies> 

                <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" /> 

    </assemblies> 

</compilation> 

 

5. Clear the browser cache, before you run the upgraded project.   

We are happy to hear that your requirement is achieved. 

 

Regards, 

Venkatesh Ayothiraman.