Command Button with Font Awesome icon triggers change event

2 posts, 1 answers
  1. Darren
    Darren avatar
    1 posts
    Member since:
    Mar 2016

    Posted 10 May 2016 Link to this post

    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

  2. Answer
    Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 11 May 2016 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top