Height Issue with RadGrid

[Venkata]

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>

[Vessy]

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