[Solved] RadGrid width bug with RadSplitter

[Larry]

Hello,

I seem to be having an issue with the RadSplitter not assuming the width="100%" property when i have a nested RadGrid with the PageSize property set.  Instead a small amount of margin appears on the right side of the splitter.  If i remove the attribute "PageSize" then the grid renders properly.  Below is a sample of the code.

<telerik:RadSplitter runat="server" Orientation="Horizontal" SplitBarsSize="7px"
        ResizeWithBrowserWindow="true"
        ID="splitter"  Height="100%"
        FullScreenMode="true"
        VisibleDuringInit="false" Width="100%" style="width:100%">

        <telerik:RadPane ID="detailPanel" runat="server" Height="65%" Width="100%" MaxHeight="540">
            stuff
        </telerik:RadPane>

        <telerik:RadSplitBar id="bar" runat="server" CollapseMode="Both" />
        <telerik:RadPane ID="drillPanel" runat="server"  Width="100%" >
            <Telerik:RadGrid Width="100%" runat="server" ID="radGrid" DataSourceID="ds">
                <MasterTableView
                    EnableViewState="false"
                    ShowHeadersWhenNoRecords="true"
                    AllowFilteringByColumn="true"
                    AutoGenerateColumns="false"
                    width="100%"
                    AllowMultiColumnSorting="true"
                    CanRetrieveAllData="false"
                    PageSize="100">
                    <Columns>
                        <Telerik:GridTemplateColumn HeaderText="Title">
                            <ItemTemplate>
                                To Kill a Mockingbird
                            </ItemTemplate>
                        </Telerik:GridTemplateColumn>
                        <Telerik:GridTemplateColumn HeaderText="Title">
                            <ItemTemplate>
                                To Kill a Mockingbird
                            </ItemTemplate>
                        </Telerik:GridTemplateColumn>
                        <Telerik:GridTemplateColumn HeaderText="Title">
                            <ItemTemplate>
                                To Kill a Mockingbird
                            </ItemTemplate>
                        </Telerik:GridTemplateColumn>
                        <Telerik:GridTemplateColumn HeaderText="Title">
                            <ItemTemplate>
                                To Kill a Mockingbird
                            </ItemTemplate>
                        </Telerik:GridTemplateColumn>
                    </Columns>

                </MasterTableView>
            </Telerik:RadGrid>
        </telerik:RadPane>
    </telerik:RadSplitter>

Any thoughts as to what's causing the issue?

Thanks,
Ernie

[Dimo]

Hi Larry,

In case you are using a RadSplitter-based layout for the whole web page, it is recommended to add the following CSS style:

html
{
    overflow: hidden;
}

This will prevent the empty space on the right side to appear (the space is triggered by the browser scrollbar)


Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.