How to Enable rowClick on Custom Cells in a Grid Component?

[Nurik]

How can I make a custom cell in a Grid component respond to rowClick events? Currently, when I use rowClick in the Grid, it doesn't work for custom cells. What is the best way to ensure rowClick works for both regular and custom cells?

[Nurik]

I resolve this problem with pointer-events: none for custom cells. To ensure that rowClick works for both regular and custom cells in the Grid, you can use the pointer-events: none CSS property for the custom cells. This allows click events to pass through the custom cell and reach the parent row, enabling the rowClick functionality.

But I didn't find another solve from library.

[Vessy]

Hello, Nurik,

Thanks a lot for sharing the found solution with the community. On a side note, incase you are implementing the custom cells in the Grid via the old cell prop, I would advise that you migrate to the new cells.data prop, where the row click is handled by default:

• https://www.telerik.com/kendo-react-ui/components/grid/cells#add-basic-custom-data-cell 

[Nurik]

Thank you for your help. I used cells={{ data: CustomCell }} this initially, but I used this sctructure 

const CustomDateTimeCell = (props: GridCustomCellProps) => {
    return (
      <td {...props.tdProps}>
        <div className={'dateTimeCell'}>
          {props.dataItem.details.time.map((item: string) => (
            <span>
              {item} 
            </span>
          ))}
        </div>
      </td>
    )
  }

where className is not in td, after use className in td without children wrapper, rowClick is enable for click. That is why pointer-events: none; to children wrapper is usefull for my type of structure.

 

[Vessy]

Thanks a lot for the update, Nurik - I am sure that your explanation will be beneficial to the other users facing the same issue as well!