Height Issue with RadGrid

2 posts, 0 answers
  1. Venkata
    Venkata avatar
    126 posts
    Member since:
    Nov 2009

    Posted 01 Jun 2015 Link to this post

    Hello,

    I have a RadSplitter with 2 RadPanes

    In Left pane i am loading TreeView List. In RightPane i am loading Radgrid with 10,000 rows.

    Each page load, about 5-7 seconds RadSplitter shows small then expanding(Please see attachment) to full screen.

    <style type="text/css">
    html, body, form 
           
               height: 100%; 
               margin: 0px; 
               padding: 0px; 
               overflow: hidden; 
           }
    </style>

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
           <script type="text/jscript">
              function pageLoad()
                
                    var splitter = $find("<%=RadSplitter1.ClientID%>");
                    splitter.clientHeight = (screen.availHeight - 5) + "px";
                }

     

           var minWidth = 1000;
               var minHeight = 600;

               window.onresize = ResizeSplitter;

               function ResizeSplitter() {
                   var splitter = $find("<%=RadSplitter1.ClientID %>");
                   if (!splitter) return;
                   var viewport = $telerik.getViewPortSize();
                   var widthToSet = viewport.width > 1000 ? viewport.width : 1000;
                   var heightToSet = viewport.height > 600 ? viewport.height : 600;
                   splitter.set_width(widthToSet);
                   splitter.set_height(heightToSet);
                   var wrapper = $get("ParentDivElement");
               }

           </script>
    </telerik:RadCodeBlock>

     <div id="ParentDivElement" style="height: 100%;"> 
     
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" LiveResize="true" OnClientLoad="ResizeSplitter">
     
               <telerik:RadPane ID="TreePane" runat="server" Width="25%">
     
                <telerik:RadTreeView ID="RadTreeMatt" runat="server"
                       style="white-space: normal;" Skin="Windows7" Font-Size="12pt" CheckBoxes="True"
                       TriStateCheckBoxes="true" CheckChildNodes="true"
                       onnodeexpand="RadTreeMatt_NodeExpand">
                    
                </telerik:RadTreeView>
     
               </telerik:RadPane>
     
               <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward">
               </telerik:RadSplitBar>
     
                <telerik:RadPane ID="GridPane" runat="server" Width="75%" MinHeight="2000"  Scrolling="None" >
                   <div id="divGrid" style="width:100%; height:100%;">
     
                   <telerik:RadGrid ID="grdList" EnableViewState="false" runat="server"
                      PageSize="10000" AutoGenerateColumns="false" AllowPaging="true"
                      Skin="Bootstrap" Width="100%" Height="100%" AllowSorting="True"
                      AllowFilteringByColumn="false" GridLines="None"
                      onneeddatasource="grdList_NeedDataSource"
                      onitemcreated="grdList_ItemCreated"
                      onitemdatabound="grdList_ItemDataBound">
                   <ItemStyle Wrap="false"></ItemStyle>
                   <MasterTableView AllowMultiColumnSorting="true" TableLayout="Fixed">
                       <Columns>
                               <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn">
                               <HeaderStyle HorizontalAlign="Left" Width="2%"></HeaderStyle>
                               <ItemStyle HorizontalAlign="Left" Width="2%"></ItemStyle>
                               </telerik:GridClientSelectColumn>
                                     
                               <telerik:GridHyperLinkColumn HeaderText="Name" DataTextField="LeadFullName" AllowFiltering="false" DataNavigateUrlFields="LeadID,MatterID" DataNavigateUrlFormatString="javascript:AddorEditorViewLead({0})" SortExpression="LeadFullName" UniqueName="LeadFullName" HeaderStyle-Font-Underline="true" DataType="System.String" >
                                   <HeaderStyle HorizontalAlign="Left" Width="12%"></HeaderStyle>
                                   <ItemStyle HorizontalAlign="Left" Width="12%"/>
                               </telerik:GridHyperLinkColumn>
                                                                         
                               <telerik:GridBoundColumn HeaderText="Address" DataType="System.String" DataField="Address" UniqueName="Address" SortExpression="Address" AllowFiltering="false">
                                   <HeaderStyle HorizontalAlign="Left" Width="15%"></HeaderStyle>
                                   <ItemStyle HorizontalAlign="Left" Width="15%" Wrap="true"></ItemStyle>
                               </telerik:GridBoundColumn

     

                                   <telerik:GridBoundColumn HeaderText="E-Mail" DataType="System.String" DataField="Email" UniqueName="Email" SortExpression="Email" AllowFiltering="false">
                                   <HeaderStyle HorizontalAlign="Left" Wrap="false" Width="13%"></HeaderStyle>
                                   <ItemStyle HorizontalAlign="Left" Width="15%" Wrap="true"></ItemStyle>
                               </telerik:GridBoundColumn>

     

                     
                               <telerik:GridBoundColumn HeaderText="Phone" DataType="System.String" DataField="Phone" UniqueName="Phone" SortExpression="Phone" AllowFiltering="false">
                                   <HeaderStyle HorizontalAlign="Left" Width="10%"></HeaderStyle>
                                   <ItemStyle HorizontalAlign="Left" Width="10%" Wrap="true"></ItemStyle>
                               </telerik:GridBoundColumn

     

                               <telerik:GridTemplateColumn UniqueName="LinkButtonColumn" AllowFiltering="false">
                               <HeaderTemplate>
                               <telerik:RadCodeBlock ID="codeblaok1" runat="server">
                                   <asp:ImageButton runat="server" ID="btnNew" ToolTip="Add New Lead"                                                               OnClientClick="AddNew();return false;" ImageUrl="~/images/buttons/plus_blue.gif" />
                                   </telerik:RadCodeBlock>                    
                               </HeaderTemplate>
                               <HeaderStyle HorizontalAlign="Left" Width="15%" Wrap="false"></HeaderStyle>
                           </telerik:GridTemplateColumn>  
                       </Columns>
                   </MasterTableView>
                    <ClientSettings>
                       <Scrolling AllowScroll="true" ScrollHeight="500px" UseStaticHeaders="true" />                          
                       <Selecting AllowRowSelect="True" UseClientSelectColumnOnly="True" ></Selecting>
                   </ClientSettings
               </telerik:RadGrid>
               </div> 
            </telerik:RadPane> 
     
           </telerik:RadSplitter>


          </div>

  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 02 Jun 2015 Link to this post

    Hi Venkata,

    the Splitter renders itself inside-out and this is why its actual size get calculated at the end of the controls loading. In order to avoid this flickering you can set the controls VisibleDuringInit property to false:
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" LiveResize="true" OnClientLoad="ResizeSplitter" VisibleDuringInit="false">
        ...
    </telerik:RadSplitter>

    I hope this helps.

    Regards,
    Vessy
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top