Locked Column row height with Menu ClientTemplate column

[Brian Roth]

Hello,

I've got a grid where I'm trying to use locked columns.  One of those columns has a client template which is a Kendo Menu control.  It looks like the logic that calculates the row heights for the locking is considering the height of the fully expanded menu (in my case I have one item at the top level of the menu and 2 items in the level below that.)  This results in my grid rows being much taller than needed for the rest of the data.  If I remove the column with the menu control the height calculates properly based on the rest of the data in the grid cells.  Is there a way to exclude the menu - or at least the sub-level menu items - from the height calculations?  Thanks for your help!  I'm on the latest internal build 4.1.519.

Regards,
Brian

[Nikolay Rusev]

Hello Brian,

We are not sure how to replicate this behavior. Can you please illustrate it in a runnable example?
The algorithm for synchronization of locked and unlocked rows is simple:
 - get a pair of locked and unlocked row
 - measure their actual height
 - set on both the height of the bigger one
 - move to the next pair of rows

Regards,
Nikolay Rusev
Telerik

 

 

[Brian Roth]

Hi Nikolay,

Thanks for the response.  I'm attaching a modified version of the frozen-columns.html file that gives a pretty good depiction of my situation.  Let me know if this helps in reproducing what I'm seeing.  Thanks!

Regards,
Brian

[Nikolay Rusev]

Hello Brian,

The behavior is due to the fact that when the row adjusting algorithm is executed the menu is not yet created and the height of the ul>li..etc. affects the measured row height. To avoid this you have to make two changes:
  - render the li elements initially hidden, so that when the row height is measured their height doesn't affect the row height

.my-menu > li {
 display: none;
}

 - before menu initialization show the li elements  

dataBound: function(e) {
 $('.my-menu').find(">li").show().end().kendoMenu();
}

However the menu items will not be completely usable as the grid cells have overflow set. You will need to change that:

div.k-grid td {
 overflow: visible;
}

That's all fine except that for the last row the menu items will not be visible at all as they will appear bellow the scrollable content which wraps grid tables. In order to avoid this you will have to:

 - set height of the rows (both locked and unlocked)

.k-grid-content-locked tr, .k-grid-content tr {
 height: 40px;
}

 
 - set bottom padding of the containers

.myGrid .k-grid-content-locked, .myGrid .k-grid-content {
 padding-bottom: 50px;
}

In the last two snippets the height and padding-bottom values must be adjusted as per your scenario in order to see all items of the menu.

Here is a complete example: http://trykendoui.telerik.com/@rusev/oDOb.

Regards,
Nikolay Rusev
Telerik

 

 

[Brian Roth]

Hi Nikolai,

Thanks so much for putting together this example!  It would have taken me forever to figure this out on my own, so I really appreciate the help.  I was able to implement it in my solution and it's working for the most part.  It's just the height/padding-bottom styles that you listed in your example that doesn't seem to be working for me on the example you posted.  The menu still gets cut off by the pager.  I can definitely work around that, but let me know if you have any other ideas for how to avoid that clipping.   

Regards,
Brian

[Nikolay Rusev]

Hello Brian,

`It's just the height/padding-bottom styles that you listed in your example that doesn't seem to be working for me on the example you posted.  The menu still gets cut off by the pager.`
 - I'm not able to replicate this on the example I've posted. You can see it here: http://screencast.com/t/09ylqUoPkFj.

The `height` and `padding-bottom` is kind of a *magic number* - you will have to adjust them per your scenario.
 
The role of `height` is to have equal height of the rows in both tables, while the role of the`padding-bottom` is to have enough space in the scrollable containers in order to be able to see all menu items for the last row in the page.
  
Regards,
Nikolay Rusev
Telerik

 

 

[Brian Roth]

Thanks for the screencast.  That prompted me to try the solution in a few different browsers.  It seems like (at least for me) the padding-bottom was working in Chrome, but not in Firefox or IE10.  I had only tried it on FF and IE yesterday, so that was my confusion.  Does it work for you in all three browsers?  Thanks again for all your work on this.

Regards,
Brian

[Nikolay Rusev]

Hello Brian,

It turns that the browser doesn't respect the padding. The workaround is to set margin of the table instead:

.myGrid .k-grid-content-locked table, .myGrid .k-grid-content table {
 margin-bottom: 50px;
}

Here is an updated example: http://trykendoui.telerik.com/Onod.

Regards,
Nikolay Rusev
Telerik

 

 

[Brian Roth]

Perfect!  Thanks so much!

Brian