I have requirement in out application like, when i do incell editing & click on save, if i get duplicate records from the response, i have to highlight the row in red color & show tooltip with error message whenever i hover on the any place in that particular row. I followed this link for highlighting the row with red color. But unable to show tooltip for the entire row. Please help
https://www.telerik.com/kendo-react-ui/components/grid/styling/basics/#toc-styling-the-kendoreact-data-grid-rows
1 Answer, 1 is accepted
Hello Abhishek,
Thank you for reaching out to us.
For achieving the desired result you can add a "title" attribute to your TR element within the rowRender and use our Tooltip component that will display a tooltip using the "title" attribute value. Here is an example using the styling row demo as a starting point and adding a tooltip conditionally:
More information about the Tooltip component can be found in the following section from our documentation;
Hope this ehlps.
Regards,
Konstantin Dikov
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 2
Iron
Iron
Iron
I want to display the error message which i get from API response. Like for example if row# 2 & 3 are duplicates, then i have to show the response like 'Duplicates found. Row # 2, , 3 are duplicates'. There might be multiple rows also duplicates. & i have to show the tooltip in the custom cells as well when there is no data in the mandatory fields.
As of now i have added tooltip in each custom cells to show duplicate message & no data error message.
If you want to show the tooltip manually and not on hover, you can try using our Popup or Popover components instead:
- https://www.telerik.com/kendo-react-ui/components/popup/
- https://www.telerik.com/kendo-react-ui/components/tooltip/popover/
Another option would be to still use the "title" attribute to the duplicate rows, but handle the "open" state manually: