Hello!
I have an issue with the grid layout when there are frozen columns and the grid width allows to show all columns without horizontal scrollbar.
The test page is very simple:
When the browser width is small and the horizontal scrollbar is shown, everything looks fine. But when I enlarge the browser window, the scrollbar disappears, but some space at the bottom still seems to be "reserved" for it.
Well, in the OnGridCreated event handler I could set the size of the scroll area
but this does not work for me because (1) how should I get know whether the horizontal scrollbar is shown, and (2) more important, I need the grid be resized dynamically.
The following code does not work:
This issue occurs only when FrozenColumnsCount is set to non-zero. The UseStaticHeaders parameter does not matter.
So, could you please guide me how to get rid of this layout issue for the grid with frozen columns?
Thank you!
I have an issue with the grid layout when there are frozen columns and the grid width allows to show all columns without horizontal scrollbar.
The test page is very simple:
<
div
style
=
"width: 50%;height: 200px"
>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
Width
=
"100%"
Height
=
"100%"
AutoGenerateColumns
=
"False"
OnNeedDataSource
=
"OnGridNeedDataSource"
>
<
MasterTableView
Width
=
"100%"
CommandItemDisplay
=
"None"
>
<
Columns
>
<
telerik:GridBoundColumn
HeaderText
=
"Column 1"
UniqueName
=
"Column1"
DataField
=
"Column1"
HeaderStyle-Width
=
"100"
/>
<
telerik:GridBoundColumn
HeaderText
=
"Column 2"
UniqueName
=
"Column2"
DataField
=
"Column2"
HeaderStyle-Width
=
"100"
/>
<
telerik:GridBoundColumn
HeaderText
=
"Column 3"
UniqueName
=
"Column3"
DataField
=
"Column3"
HeaderStyle-Width
=
"100"
/>
<
telerik:GridBoundColumn
HeaderText
=
"Column 4"
UniqueName
=
"Column4"
DataField
=
"Column4"
HeaderStyle-Width
=
"100"
/>
<
telerik:GridBoundColumn
HeaderText
=
"Column 5"
UniqueName
=
"Column5"
DataField
=
"Column5"
HeaderStyle-Width
=
"100"
/>
</
Columns
>
</
MasterTableView
>
<
ClientSettings
>
<
Scrolling
AllowScroll
=
"True"
UseStaticHeaders
=
"True"
FrozenColumnsCount
=
"2"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
</
div
>
When the browser width is small and the horizontal scrollbar is shown, everything looks fine. But when I enlarge the browser window, the scrollbar disappears, but some space at the bottom still seems to be "reserved" for it.
Well, in the OnGridCreated event handler I could set the size of the scroll area
<
script
>
function ResizeGrid(gridID)
{
var scrollArea = $get(gridID + "_GridData");
scrollArea.style.height = (157 + 17) + "px";
}
function OnGridCreated(sender, ev)
{
ResizeGrid(sender.ClientID);
}
</
script
>
but this does not work for me because (1) how should I get know whether the horizontal scrollbar is shown, and (2) more important, I need the grid be resized dynamically.
The following code does not work:
<
telerik:RadScriptBlock
runat
=
"server"
>
<
script
>
window.onresize = function () { setTimeout(function() { ResizeGrid("<%=RadGrid1.ClientID%>"); }, 200) }
function ResizeGrid(gridID)
{
var scrollArea = $get(gridID + "_GridData");
scrollArea.style.height = (157 + 17) + "px";
$find(gridID).repaint();
}
</
script
>
</
telerik:RadScriptBlock
>
This issue occurs only when FrozenColumnsCount is set to non-zero. The UseStaticHeaders parameter does not matter.
So, could you please guide me how to get rid of this layout issue for the grid with frozen columns?
Thank you!