This is a migrated thread and some comments may be shown as answers.

Grid cell Tooltip not updating after filtering

5 Answers 432 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
SoH
Top achievements
Rank 1
Iron
Veteran
Iron
SoH asked on 16 Mar 2021, 06:19 PM

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.   <Grid
03.        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.        <Column
11.            field="id"
12.            title="id"
13.            filter={'text'}
14.            cell={Tooltip}
15.            columnMenu={ColumnMenu} />
16.        <Column
17.            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

Sort by
0
Stefan
Telerik team
answered on 17 Mar 2021, 06:02 AM

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/.

0
SoH
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 18 Mar 2021, 12:13 PM

Yes this is the exact issue.Can you create a task to fix this bug please?

Thank you.

0
Stefan
Telerik team
answered on 18 Mar 2021, 12:55 PM

Hello,

Thank you for the confirmation.

I have logged this for fixing, and the status can be monitored here:

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.

0
SoH
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 18 Mar 2021, 01:31 PM

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.

0
Stefan
Telerik team
answered on 18 Mar 2021, 02:21 PM

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/.

Tags
General Discussions
Asked by
SoH
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Stefan
Telerik team
SoH
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or