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.
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>
1 Answer, 1 is accepted
0
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>
),
}}
/>You can test the later suggestion in the link below, I hope it will be helpful for you:
Regards,
Vessy
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!