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

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

2 Answers 243 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nelbin
Top achievements
Rank 1
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

Sort by
0
Venelin
Telerik team
answered on 17 Dec 2013, 11:33 AM
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.
0
Nelbin
Top achievements
Rank 1
answered on 17 Dec 2013, 11:54 AM
I have found out the culprit. I have started a new thread here http://www.telerik.com/community/forums/aspnet-ajax/grid/loadpersister-settings-modify-content.aspx
Tags
Grid
Asked by
Nelbin
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Nelbin
Top achievements
Rank 1
Share this question
or