Grid goes beyond its splitter pane

4 posts, 0 answers
  1. Srinivasan
    Srinivasan avatar
    2 posts
    Member since:
    Aug 2014

    Posted 10 Jan 2015 Link to this post

    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?
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 14 Jan 2015 Link to this post

    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.

     
  3. Srinivasan
    Srinivasan avatar
    2 posts
    Member since:
    Aug 2014

    Posted 22 Jan 2015 in reply to Petur Subev Link to this post

    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
  4. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 23 Jan 2015 Link to this post

    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.

Back to Top