Enlarging the clickable area for the toolbar items

[Thong Ta]

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,

Thong

[Prasanna Kumar Viswanathan]

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,

Regards,

Prasanna Kumar N.S.V

[Thong Ta]

Hi,

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,

Thong

Attachment: gridtoolbarpaddingerror_d92f43af.zip

[Prasanna Kumar Viswanathan]

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

if($(sender.target).hasClass("e-tooltxt"))

{

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

}

}

</script>

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.

Regards,

Prasanna Kumar N.S.V