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

Grid goes beyond its splitter pane

3 Answers 67 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Srinivasan
Top achievements
Rank 1
Srinivasan asked on 10 Jan 2015, 03:59 PM
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?

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 14 Jan 2015, 08:53 AM

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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Srinivasan
Top achievements
Rank 1
answered on 22 Jan 2015, 06:53 AM
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
0
Dimo
Telerik team
answered on 23 Jan 2015, 03:08 PM
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

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Tags
Grid
Asked by
Srinivasan
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Srinivasan
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or