Command Button with Font Awesome icon triggers change event

[Darren]

I have a Kendo UI Grid with a command button column formatted to display a font awesome icon. The grid also handles the change event in order to redirect to the particular records detail page when the row is clicked. The button and icon display as expected but if you click on the button exactly where the icon is the change event get triggered prior to the button click event. Clicking anywhere else on the button causes the button to behave as expected.

Here is an example based on the Use FontAwesome Icons in Kendo UI Grid demo - 

http://dojo.telerik.com/uCOxA

Can anyone think of a way around this problem?

Thanks

[Dimo]

Hi Darren,

By design, Grid selection does not occur if the user clicks on a form element (button, textbox, etc). However, we do not explicitly check if the clicked non-button element is inside a button. This causes the observed unexpected behavior.

A possible workaround is to stop event bubbling when the user clicks on the FA icon and trigger the button's click manually.

dataBound: function (e) {
  e.sender.tbody.find(".k-button.fa").each(function(idx, element){
    $(element).removeClass("fa fa-map-marker").find("span").addClass("fa fa-map-marker").mousedown(function(j) {
      j.stopPropagation();
      $(j.target).parent().click();
    });
  });
},

We have modified our source code to avoid the discussed issue and changes will take effect in the next internal and official Kendo UI builds.

Regards,
Dimo
Telerik