Grid cell Tooltip not updating after filtering

6 posts, 0 answers
  1. SoH
    SoH avatar
    12 posts
    Member since:
    Jun 2017

    Posted 16 Mar Link to this post

    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.}
  2. Stefan
    Admin
    Stefan avatar
    3070 posts

    Posted 17 Mar Link to this post

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

  3. SoH
    SoH avatar
    12 posts
    Member since:
    Jun 2017

    Posted 18 Mar in reply to Stefan Link to this post

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

    Thank you.

  4. Stefan
    Admin
    Stefan avatar
    3070 posts

    Posted 18 Mar Link to this post

    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.

  5. SoH
    SoH avatar
    12 posts
    Member since:
    Jun 2017

    Posted 18 Mar in reply to Stefan Link to this post

    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.

  6. Stefan
    Admin
    Stefan avatar
    3070 posts

    Posted 18 Mar Link to this post

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

Back to Top