I have a KendoReact grid that shows a custom cell to add tooltips.
My grid code:
<Tooltip openDelay={100} position="bottom">
<Grid
data={process(teams.map((item) => ({ ...item, selected: item.uniqueIdentifier === gridSelection.uid })), gridState)}
{...gridState}
onDataStateChange={handleGridDataStateChange}
onRowClick={handleRowClick}
onRowDoubleClick={handleDoubleClick}
sortable={true}
pageable={true}
selectedField="selected">
<Column
title={teamname}
field="name" filter={'text'}
cell={GridCellTooltip}
columnMenu={ColumnMenu}
headerCell={CustomHeaderCell}
/>But when I filter the grid, the tooltip does not update and retains the value from the previous rendering:
My cell component - GridCellTooltip - is returning the field value in the title attribute:
return (
<td title={props.dataItem[field]}>
{props.dataItem[field]}
</td>
);But I can see when I inspect it, that title is not being set and so seems to default to the previous tooltip value for that row.
There is nothing else custom going on and this is all client side sorting, filtering, etc.
Any idea what the issue might be?
Hi, SoH,
Based on the provided description it sounds like the state is not being updated properly for some reason. If that is the case I can recommend triggering an update of the state using keys, more information on that can be found here:
https://legacy.reactjs.org/docs/lists-and-keys.html
In case this does not work and the issue persists, can you please send us a runnable example that reproduces the issue? This way we can debug it and see what might be causing this undesired behavior.
Regards,
Filip
I can reproduce this issue based on one of the kendo grid samples:
https://stackblitz.com/edit/react-eevphc?file=app%2Fmain.jsx%3AL37-L37,app%2Fmain.jsx
At first the tooltip is correct:
Sort by Product Name, and the tooltips are incorrect
I had to move the mouse away from the grid
Thank you for the example, I tested it and was able to reproduce the wrong tooltip behavior. After further debugging it seems that the Grid's data items are not updating correctly after the sort, thus showing the wrong tooltips. I was able to resolve it by adding a `key`, it seems that now the tooltips are showing correctly:
<Grid key={gridState.sort.map((s) => s.field + s.dir).join('_')} style={{ height: '400px' }} data={process( products.map((item) => ({ ...item, selected: item.ProductID === gridSelection.ProductID, })), gridState )} {...gridState} onDataStateChange={handleGridDataStateChange} sortable={true} pageable={true} selectedField="selected" > <GridColumn field="ProductID" title="ID" width="40px" /> <GridColumn field="ProductName" title="Product Name" width="250px" cell={ProductNameCell} headerCell={ProductNameHeader} /> <GridColumn field="Category.CategoryName" title="CategoryName" /> <GridColumn field="UnitPrice" title="Price" width="80px" /> <GridColumn field="UnitsInStock" title="In stock" width="80px" /> </Grid>Please give this a try and let us know if further assistance is required.