This is a migrated thread and some comments may be shown as answers.

[Solved] RadGrid doesnt fit in the page(overflows) inside radpane.

2 Answers 350 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Nelbin asked on 13 Dec 2013, 01:27 AM

I have previously set the height of the RadGrid(radgrid1 and radgrid2) height by 100%. But the radgrid still overflows and the pager cannot be seen unless the browser is zoomed which is not a good option. Any workaround on this?

Thanks in advance!

<div id="ParentDivElement" runat="server">

<telerik:RadSplitter ID="MainSplitter" runat="server" Width="100%" Orientation="Horizontal"

Skin="WebBlue">

<telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">

<telerik:RadSplitter ID="NestedSplitter" runat="server" LiveResize="True" Skin="WebBlue">

<telerik:RadPane ID="LeftPane" runat="server" MaxWidth="250" MinWidth="250" Scrolling="None"

Width="250">

<center>

</center>

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="WebBlue" Width="100%">

<Items>

<telerik:RadPanelItem runat="server" Enabled="True" Expanded="True" PostBack="False">

<HeaderTemplate>

<table cellpadding="0" cellspacing="0" width="100%">

<tr>

<td align="left" valign="top">

<asp:Label ID="lblGreeting" runat="server" Font-Names="Trebuchet MS" SkinID="labelSkin1"

Text="Hi User!"></asp:Label>

</td>

<td align="right" valign="top">

</td>

</tr>

</table>

</HeaderTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</telerik:RadPane>

<telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward"

LiveResize="true" />

<telerik:RadPane ID="ContentPane" runat="server" BackColor="#cbd5df"

Scrolling="None">

<asp:Panel ID="Panel2" runat="server">

<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True" AllowPaging="true"

AllowRowResize="False" AllowSorting="True" BorderStyle="None" GridLines="None"

ShowFooter="True" ShowGroupPanel="false" Skin="WebBlue" Visible="False" >

<ClientSettings AllowDragToGroup="true" EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" >

<Selecting AllowRowSelect="True" />

<ClientEvents OnRowSelected="RowSelected2" />

</ClientSettings>

<MasterTableView AutoGenerateColumns="False" ClientDataKeyNames="Code" CommandItemDisplay="Top"

EnableHeaderContextMenu="True">

<CommandItemTemplate>

<div align="left" style="padding-left: 5px; padding-top: 2px">

<asp:ImageButton ID="ImageButton1" CommandName="SaveSettings" ToolTip="Save Gridview Settings"

runat="server" ImageUrl="~/Images/save-gridview-settings_24x24.png" />

<asp:ImageButton ID="ImageButton2" CommandName="DefaultSettings" ToolTip="Reset Gridview Settings"

runat="server" ImageUrl="~/Images/restore-default-settings_24x24.png" /></div>

</CommandItemTemplate>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn AllowFiltering="False" CurrentFilterFunction="Custom"

DataField="" DefaultInsertValue="" Groupable="true" Reorderable="False" HeaderText=""

ReadOnly="True" SortExpression="" UniqueName="">

<ItemTemplate>

<asp:Image ID="Image1" runat="server" ImageUrl='<%# "~\Images\DocTypes\" + Eval("Doc").ToString + ".png" %> ' /></ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Decision" DefaultInsertValue="" HeaderText="Decision"

SortExpression="Decision" UniqueName="Decision" FilterListOptions="VaryByDataType"

DataType="System.String">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Subj" DefaultInsertValue="" HeaderText="Subj"

SortExpression="Subj" UniqueName="Subj" DataType="System.String" FilterListOptions="VaryByDataType">

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn DefaultInsertValue="" DataField="Date" HeaderText="Date"

SortExpression="Date" PickerType="DatePicker" EnableRangeFiltering="true"

DataFormatString="{0:MMMM d, yyyy}" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="right"

FooterStyle-HorizontalAlign="Left">

</telerik:GridDateTimeColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView><ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True">

<Resizing AllowColumnResize="true" />

</ClientSettings>

<PagerStyle Mode="NextPrevNumericAndAdvanced" />

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

<telerik:RadGrid ID="RadGrid2" runat="server" AllowFilteringByColumn="True"

AllowPaging="true" AllowRowResize="False" AllowSorting="True" BorderStyle="None"

GridLines="None" PageSize="10" ShowFooter="False" ShowGroupPanel="False" Skin="WebBlue"

Visible="False">

<ClientSettings AllowDragToGroup="true" EnablePostBackOnRowClick="true" EnableRowHoverStyle="true">

<Selecting AllowRowSelect="True" />

<ClientEvents OnRowSelected="RowSelected2" />

</ClientSettings>

<MasterTableView AutoGenerateColumns="False" ClientDataKeyNames="Code" CommandItemDisplay="Top"

EnableHeaderContextMenu="True">

<CommandItemTemplate>

<div align="left" style="padding-left: 5px; padding-top: 2px">

<asp:ImageButton ID="ImageButton1" runat="server" CommandName="SaveSettings" ImageUrl="~/Images/save-gridview-settings_24x24.png"

ToolTip="Save Gridview Settings" />

<asp:ImageButton ID="ImageButton2" runat="server" CommandName="DefaultSettings" ImageUrl="~/Images/restore-default-settings_24x24.png"

ToolTip="Reset Gridview Settings" /></div>

</CommandItemTemplate>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn AllowFiltering="False" CurrentFilterFunction="Custom"

DataField="" DefaultInsertValue="" Groupable="true" HeaderText="" ReadOnly="True"

SortExpression="" UniqueName="">

<ItemTemplate>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Map" DataType="System.String" DefaultInsertValue=""

FilterListOptions="VaryByDataType" HeaderText="Map" SortExpression="Map"

UniqueName="Map">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Location" DataType="System.String" DefaultInsertValue=""

FilterListOptions="VaryByDataType" HeaderText="Location" SortExpression="Location"

UniqueName="Location">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Longitude" DataType="System.Double" DefaultInsertValue=""

FilterListOptions="VaryByDataType" HeaderText="Longitude" SortExpression="Longitude"

UniqueName="Longitude">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Latitude" DataType="System.Double" DefaultInsertValue=""

FilterListOptions="VaryByDataType" HeaderText="Latitude" SortExpression="Latitude"

UniqueName="Latitude">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView><ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True">

<Resizing AllowColumnResize="true"></Resizing>

</ClientSettings>

<PagerStyle Mode="NextPrevNumericAndAdvanced" />

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

</asp:Panel>

</telerik:RadGrid>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Backward" LiveResize="true" />

<telerik:RadPane ID="RightPane" runat="server" MinWidth="300" Width="850px" Scrolling="None">

</telerik:RadPane>

</telerik:RadSplitter></telerik:RadPane>

</telerik:RadSplitter>

</div>

2 Answers, 1 is accepted

answered on 17 Dec 2013, 11:33 AM

RadGridInRadSplitter.zip

Hello Nelbin,

RadGrid behaves as a normal block-level html element, since it is wrapped in a div. This means the same principles are valid for it. Here is a sample project that demonstrates how to nest a grid with height 100% in a splitter. Please give it a try and see if it helps resolving your problem.

Regards,
Venelin
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.