[Solved] Layout issue for the grid with frozen columns

[Vlad]

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:

<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!

[Maria Ilieva]

Hi Vlad,

Thank you for reporting this issue.

Our dev team confirm that this behavior is a bug and I already logged it into our tracking system. Our developers will do their bets to fix the issue as soon as possible.
As a token of gratitude for sharing this issue you will find your Telerik points updated.

Regards,
Maria Ilieva
Telerik