Entire Cell Clickable

[Ankur]

Hi Team,

I am using the kendo grid in angular. but I am facing one problem in cell clickable. Let's suppose we have column in which image / icon/ or button is clickable. But now we have to do the whole cell click instead of the icon/image/button clickable. we have to perform same action which have the button or icon or image. In simple words any outside click in cell rather than the spacific image , button or anything else should be same behave as we click on the button or image or icon.

can suggest what is the best approach to implement this behaviour.

Thanks,

Ankur Gupta

[Hetali]

Hello Ankur,

We have a built-in cellClick event in the GridComponent which can run a function when you click anywhere outside the button, an image or an icon. For example:

<kendo-grid (cellClick)="cellClick($event)">
  <kendo-grid-column title="Button" width="120">
    <ng-template kendoGridCellTemplate let-dataItem>
      <button class="k-button" (click)="buttonClick()">Button</button>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

buttonClick() {
  console.log("Clicked on button");
}
cellClick(e) {
  var title = e.column.title;
  if(title === "Button") {
    this.buttonClick();
  } 
}

In this StackBlitz example, you can run a function when you click anywhere in the cell in the Kendo UI Grid.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik