Grouped header info is cutoff when using locked columns

[Sune]

The group text shown above each group is cut short if using a locked column. We would like this this text to flow into the unlocked section since the whole line seems empty and available. I realize it's rendered using two different tables, but the user doesn't care about that. 

I made the following css hack to accomplish it. It looks okay, albeit a bit slow to render. Is there a better way?

div.k-grid-content-locked tr.k-grouping-row td:first-child {
    height: 15px;
    width: 200px;
}

div.k-grid-content-locked tr.k-grouping-row td:first-child p {
    position: fixed;
    height: 19px;
    z-index: 300;
    margin-top: -12px;
    padding-top:5px;
    background-color: #f5f5f5;
}

[Sune]

I noticed an unfortunate side effect, the "position:fixed" causes text to be rendered outside the grid div.

It seems the table elements inside the grid have very large heights way beyond the grid div itself.

What's a good fix for this?

 

[Nikolay Rusev]

Hello Sune,

 

Indeed the behavior is due to the rendering of locked columns in separate table. Group header template will always render in the first table which in this case happens to be locked table.

 

You can manually move the text to the other table once the Grid is bound. Example - http://dojo.telerik.com/@rusev/iFoTI

 

Regards,
Nikolay Rusev
Telerik

 

 

[Sune]

Hi Nikolay,

 

Clever thanks, we'll use it. :-)