Our main window is vertically split into two. Left side has a grid and right has other views. We have also enabled Tooltip for the grid. We observed that even if the user moves the mouse pointer beyond the left splitter pane, the tooltip does not disappear. When we inspected the HTML elements, beyond the visible left pane, tr element of all grid rows extends to the right edge of the body and hence mouseout event does not occur.

We attempted to set the grid height and width to match the splitter pane without any success. We have observed this behavior in IE, Chrome and Firefox. We did not try in other browsers.

How to set the grid height and width same as that of splitter pane?

Hello Srinivasan,

The height of the Grid should be set explicitly to be the same as the height of the splitter it cannot be automatically synconized. As for the width, if you do not specify width, or specify width in percents the width should remain as big as the width of the splitter pane is.

Check the following examples to get a better idea what I tried to explain, you can even modify and experiment with the different settings:

http://dojo.telerik.com/@pesho/uriSu/2

http://dojo.telerik.com/@pesho/uriSu/3

Regards,
Petur Subev
Telerik

Hi Peter,

Thanks. Now we understand the cause of the problem. We have explicitly set width of the columns. If the total width of all columns exceeds the width of the splitter, then the table element (and hence the tr elements) go beyond the width of the splitter. This happens in the URL you shared too.

We have enabled tooltip on every row to display some row specific information. Because the tr element goes beyond the width of the splitter, the tooltip continues to display even if I move the cursor right out of the splitter. (We understand it happens because mouseout event does not get triggered).

At the same time, we can not remove column widths. We need to set minimum column widths.

Could you please provide a solution for our situation?

Regards,
Viswanathan

Hi Viswanathan,

Please subscribe to the mouseleave event of the Grid <div>, or any other preferred element, and hide the tooltip manually.

http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip#methods-hide

Regards,
Dimo
Telerik