OnRowClick of the row in Kendo React Grid is not working properly when using cell prop

1 Answer 59 Views
Grid
Sai
Top achievements
Rank 1
Sai asked on 28 Jan 2025, 06:00 AM

When using the cell prop to display an icon in the grid column. when we try clicking on the icon does not trigger the onRowClick event, 

sample code :

<Grid
     {...dataState}
     data={Data?.data}
     pageable={{
        pageSizes: [20, 50],
        buttonCount: 5,
     }}
    total={Data?.totalItems}
    pageSize={dataState?.take}
    onDataStateChange={dataStateChange}
    scrollable="scrollable"
    onRowClick={handleRowClick}
     >

<Column
    title="Icon Name"
    width={20}
    headerClassName="custom-header"
     cell={(props) => {
      const { Name } = props.dataItem;
      return (
      <td className="classname">
          {Map[Icon] || ""}
      </td>
       );
       }}
      />

 

Not only for the icon for anything that uses cell prop and use td is not triggering the rowclick.

 

Would Appreciate any suggestions or possible solutions, Thank you...

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 28 Jan 2025, 09:29 AM

Hello, SAi,

The faced behavior is expected as the cell prop of the Grid was designed to make the cells fully customisable, without inheriting any of the default handlers of the cells, so the developer can implement their own.

In case you would like to change only the layout of the cell but keep its click/select/etc. handlers at the same time, you will need to use its new cells.data prop and define the desired custom cell through it:

I hope this helps.

Regards,
Vessy
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
Sai
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or