Kendo React Grid' onSelectionChange problem

[Ozgur]

Hello,
I created a special cell in the grid. When this cell I created is clicked, the onSelectionChange event in the grid does not work.
But it works when I create a normal cell.



In the example below
When I click on the name and surname cells, the checkbox in the grid is marked, but when I click on the Full Name cell, the checkbox in the grid is not marked.

<Grid
    data={data.map(item => ({
        ...item,
        [SELECTED_FIELD]: selectedState[idGetter(item)]
    }))}
    style={{height: '400px'}}
    dataItemKey={DATA_ITEM_KEY}
    selectedField={SELECTED_FIELD}
    selectable={{enabled: true, drag: false, cell: false, mode: 'multiple'}}
    onSelectionChange={this.onSelectionChange}
    onHeaderSelectionChange={this.onHeaderSelectionChange}
>
    <Column field={SELECTED_FIELD} width="50px"
            headerSelectionValue={data.findIndex(item => !selectedState[idGetter(item)]) === -1}/>
    <Column field="name" title="Name" width="300px"/>
    <Column field="surname" title="Surname" width="300px"/>
    <Column  width="100px" title="Full Name" cell={(props) => (
        <td>
            <div>{props.dataItem.name + ' ' + props.dataItem.surname}</div>
        </td>
    )}/>
</Grid>

 

[Vessy]

Hello, Ozgur,

When using the old `cell` prop of the Grid, you need to ensure that the selection handler of the custom td element is handled explicitly to trigger the selectionChange event of the Grid. 

Another option (and the one that I would suggest you) is to define the custom cell through the new `cells.data` prop, where the above explained selection specific is handled and you can apply the default `tdProps` of the cell to the created custom one:

        <Column
          width="100px"
          title="Full Name"
          cells={{
            data: (props) => (
              <td {...props.tdProps}>
                <div>{props.dataItem.name + ' ' + props.dataItem.surname}</div>
              </td>
            ),
          }}
        />

• https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-group-header-group-footer-header-cell-footer-cell-filter-cell-and-data-cell

You can test the later suggestion in the link below, I hope it will be helpful for you:

• https://stackblitz.com/edit/react-fvvizh-1q9qr7?file=app%2Fmain.tsx 

Regards,
Vessy
Progress Telerik