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

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Enlarging the clickable area for the toolbar items

Thread ID:





118779 Apr 9,2015 07:39 AM UTC Apr 14,2015 02:29 PM UTC jQuery 3
Tags: ejGrid
Thong Ta
Asked On April 9, 2015 07:39 AM UTC

Hi guys,

When I create a grid with toolbar items like add, edit and delete, there is some padding around the toolbar items. This area will change the color on hovering, just like the area around the icon. But it will not react when I click it.

What would be the best way to change this? Remove the padding around the toolbar somehow or maybe make the padding clickable?

Thanks and best regards,

Prasanna Kumar Viswanathan [Syncfusion]
Replied On April 10, 2015 01:37 PM UTC

Hi Thong,

Thanks for using Syncfusion Products.

We have analyze your query and we created a grid with toolbar items add, edit and delete. When we click the padding around the toolbar items the action is performed according to the toolbar item. We unable to reproduce the reported issue in our end.

For your convenience we have attached a video with clicking on the padding around the toolbar items.

Please download the video from the below link

Video Link : http://www.syncfusion.com/downloads/support/forum/118779/Video-1976445075.zip

If we misunderstood your query, Please get back to us. Could you able to provide a simple sample or code snippet for us and could you please let us know in which scenario the issue is reproduced?, Please provide a detail information about the issue it will be helpful to provide a better solution

Please let me know if you have any further assistance on this,


Prasanna Kumar N.S.V

Thong Ta
Replied On April 13, 2015 05:01 PM UTC


thanks for the quick response. I looked into the subject and created the attached sample file.

I click on an icon, and the function "onGridToolBarClick" will be called. This function looks into $(sender.target) and reacts according to the CSS class of this target.

The problem is: if I click too far on the left or too far on the bottom of the icon, the target does not have this CSS class, but the child node.

What would be the recommended way to deal with this?

Best regards,

Attachment: gridtoolbarpaddingerror_d92f43af.zip

Prasanna Kumar Viswanathan [Syncfusion]
Replied On April 14, 2015 02:29 PM UTC

Hi Thong,

Thanks for the Update,

Your requirement have been achieved by the children jQuery Api. In toolbar click event we have check the condition, if the target has certain CSS Class then the target child node have been assigned to the target by using children jQuery Api.

Please find the below code snippet :

<script type="text/javascript">

function onGridToolBarClick(sender) {



sender.target = $(sender.target).children();




For your convenience we have created a sample and sample can be downloaded from the below link

Sample Link : http://www.syncfusion.com/downloads/support/forum/118779/Sample1883056142.zip

Please let us know if you have any further assistance on this.


Prasanna Kumar N.S.V


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