Command column click propagation

2 posts, 0 answers
  1. Ján
    Ján avatar
    18 posts
    Member since:
    Jun 2017

    Posted 04 Aug 2017 Link to this post


    we use Kendo UI for Angular 2 grid with command column. There is however a strange behavior our Command column has two two buttons in it (one with directive kendoGridEditCommand and other with kendoGridRemoveCommand) to trigger edit/delete action. that works fine. in additon thtose buttons also have kendoButton directive on them so we can style them easily - set icon and make them baer, so the button in command column in the end looks like this

    <button *ngIf="!hideEditButton"kendoGridEditCommand kendoButton [bare]="true" [primary]="true" [icon]="'edit'" title="Edit"></button>

    the grid has also selection enabled.

    the problem is that clicking on the button also selects/deselects the row, it looks like the click is propagated out of the button to the row and there is no way of overriding this as this is under kendo control.. it even seems that not the whole button has this bug, but only if icon is clicked it is propagated

  2. Dimiter Topalov
    Dimiter Topalov avatar
    1298 posts

    Posted 08 Aug 2017 Link to this post

    Hello Ján,

    Thank you for bringing this issue to our attention. We had a similar one and fixed it a while ago:

    ... but obviously the scenario involving a Kendo button and icons was not considered. I will either reopen the old issue or open a new one, and you can expect a fix in one of the upcoming Grid package versions.

    Meanwhile you can use the following CSS workaround disabling pointer-events over the icon:

    >>> .k-button.k-button-icontext .k-icon {
          pointer-events: none;

    I hope this helps, I and I am sorry for any inconvenience caused. I have also updated your Telerik points for helping us improve the quality of our product.

    Dimiter Topalov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top