I've implemented a Kendo React Grid and Tooltip. I can filter the grid without issues, however the tooltip is not updating to match the filtered grid. The tooltip is showing the information for the item that was previously in the row before the grid was filtered.
I can see that moving the cursor over the grid cell clears the tootip from the source <td title>some data</td>
Lines 01 to 23 show how my grid is implemented and lines 31 to 38 show my Tooltip component.
How can I get the cell tootip to respond to the filtering?
01.<Tooltip openDelay={100} position="bottom">02. <Grid03. data={process(this.state.gridData.map((item) => ({...item, selected: item["id"] == this.state.selectedID}) ), this.state.gridDataState)}04. {...this.state.gridDataState}05. onDataStateChange={this.handleGridDataStateChange}06. pageable={true}07. sortable={true}08. selectedField="selected">09. 10. <Column11. field="id"12. title="id"13. filter={'text'}14. cell={Tooltip}15. columnMenu={ColumnMenu} />16. <Column17. field="name"18. title="name"19. filter={'text'}20. cell={Tooltip}21. columnMenu={ColumnMenu} />22. </Grid>23.</Tooltip>24. 25.handleGridDataStateChange = (e) => {26. this.setState({gridDataState: e.data})27.}28. 29. 30. 31.export const Tooltip = (props: GridCellProps) => {32. const {field} = props;33. return (34. <td title={props.dataItem[field]}>35. {props.dataItem[field]}36. </td>37. );38.}5 Answers, 1 is accepted
Hello,
I made an example with filtering and a Tooltip that slows the current text when a cell is hovered after filtering:
https://stackblitz.com/edit/react-itux1z?file=app/main.jsx
The only time it will not change is if the user has not moved the mouse after filtering. The Tooltip is rendered and updated on the mouse move events, if the mouse is not moved the same Tooltip is shown.
If this is the case, we can log a task to hide to Tooltip when the page is re-rendered and the mouse cursor is not over the same elements anymore.
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Veteran
Iron
Yes this is the exact issue.Can you create a task to fix this bug please?
Thank you.
Hello,
Thank you for the confirmation.
https://github.com/telerik/kendo-react/issues/889
Currently, there is no workaround available, if one is found it will be added to the issue.
Additionally, I have added some Telerik points to your account for bringing this to our attention.
Apologies for the inconvenience this may have caused you.
Regards,
Stefan
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.
Rank 1
Iron
Veteran
Iron
Thank you for your quick response Stefan, much appreciated.
Just an FYI, I noticed the title attribute gets cleared on mouseover, so I'm assuming that the tooltip is caching.
Hello,
Yes, removing the title attribute is expected as this is the only way to not show the default browser tooltip.
We use expando properties to keep track of the title value:
https://developer.mozilla.org/en-US/docs/Glossary/Expando
I reason for the issue here is that we only updated it when the mouse moves, but in these cases, it does not. We have to also update it when the state is updated from outside to see if the same element still exists.
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.