This is a migrated thread and some comments may be shown as answers.

Entire Cell Clickable

1 Answer 11 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ankur
Top achievements
Rank 1
Ankur asked on 11 Mar 2021, 11:05 AM

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

1 Answer, 1 is accepted

Sort by
0
Accepted
Hetali
Telerik team
answered on 12 Mar 2021, 03:07 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Ankur
Top achievements
Rank 1
Answers by
Hetali
Telerik team
Share this question
or