Resize FileExplorer to Parent Container

3 posts, 0 answers
  1. Jermaine
    Jermaine avatar
    13 posts
    Member since:
    Feb 2013

    Posted 06 Mar 2014 Link to this post

    I need help. I need to make the FileExplorer resize it's length and width to match it's parent container.  I attempted to implement the code found here .  The browser cannot interpret the Telerik functions so I consistently get a "is not a function" response from Firebug debugger for .get_grid(), etc..  Why am I getting the error message and how can I accomplish resizing the FileExplorer to it's parent Container?  The FileExplorer is in a panel, which is in the bottom half of another panel which the width of the RadSlidingPane (ID=LSlidingPane @ line 4) can be resized by the client.  The FileExplorer's height needs to resize to the width of the sliding pane onresize and the height of it's container onload.  If this can't be done, I at least need to be able to view the bottom of the FileExplorer.  Presently, I can only view the upper portion and not the bottom horizontal scrollbar.  Any help is greatly appreciated.  Thanks.

    001.<telerik:RadSplitter id="RadSplitter1" runat="server" Height="488" Width="767">
    002.        <telerik:RadPane id="LPane" runat="server" width="22px" Scrolling="None">
    003.            <telerik:RadSlidingZone ID="LSlidingZone" runat="server" Width="22px">
    004.                <telerik:RadSlidingPane ID="LSlidingPane" runat="server"
    005.                EnableDock="True" EnableResize="True" Scrolling="None" Title="Location"
    006.                Width="250px">
    007.                    <telerik:RadSplitter ID="Radsplitter3" runat="server" Height="275" Orientation="Horizontal" Width="260">
    008.                              <telerik:RadPane ID="LoRadpane" runat="server" Scrolling="None" CssClass="AutoHeight" >  
    009.                                  <asp:Panel ID="pnlL" runat="server" >
    010.                                        <div ID="DivC" align="center" style="overflow: hidden">
    011. 
    012.                                                <asp:DropDownList ID="Bdropdwn" runat="server"
    013.                                                AutoPostBack="false" Height="25px" Width="200px">
    014.                                                </asp:DropDownList>
    015. 
    016.                                                    <br />
    017.                                                    <p />
    018.                                                <asp:ListBox ID="RListBox" runat="server" AutoPostBack="false"
    019.                                                Height="150px" Width="200px">
    020.                                                </asp:ListBox>
    021.                                                <br />
    022.                                       </div>
    023.                                    </asp:Panel>
    024.                                </telerik:RadPane>
    025.                             <telerik:RadSplitBar id="URadsplitbar" runat="server" CssClass="tab_click">
    026.                             </telerik:RadSplitBar>
    027.                                 <telerik:RadPane id="URadpane" runat="server">
    028.                                     <asp:Panel id="pnlU" runat="server" Height="100px" Width="260px">
    029.                                          <div id="layer" align="center" >
    030. 
    031.                                                                   <p align="center">
    032.                                                                   <input id="file" type="file" width="200px" />
    033.                                                                   </p>
    034.                                              </div>
    035.                                        <div id="dvFileExplorer" >
    036.                                            <asp:Panel runat="server" ID="pnlFileExplorer" class="dvFileExplorerContent" >
    037.                                                 
    038.                                                <telerik:RadFileExplorer ID="RadFileExplorer" runat="server"
    039.                                                    EnableOpenFile="false"
    040.                                                    ExplorerMode="Default" Width="100%" >
    041.                                                </telerik:RadFileExplorer>
    042. 
    043.                                            </asp:Panel>
    044.                                        </div>
    045.                                      </asp:Panel>
    046.                                  </telerik:RadPane>
    047.                             </telerik:RadSplitter>
    048.                    </telerik:RadSlidingPane>
    049. 
    050.                <telerik:RadSlidingPane ID="MPane" runat="server" EnableDock="True" EnableResize="True" Title="Message(s)" Height="275" Width="260">
    051.                    <div id="AccordionMPane">
    052.                    </div>
    053.                </telerik:RadSlidingPane>
    054.                  <telerik:RadSlidingPane id="EPane" runat="server" EnableDock="True" EnableResize="True" Title="Error(s)" Height="275" Width="260">
    055.                    <div id="AccordionEPane">
    056.                    </div>
    057.                  </telerik:RadSlidingPane>
    058.                  <telerik:RadSlidingPane id="SPane" runat="server" EnableDock="True" EnableResize="True" Title="Summary" Height="275" Width="260">
    059.                    <div id="AccordianSPane">
    060.                    </div>
    061.                  </telerik:RadSlidingPane>
    062.                 </telerik:RadSlidingZone>
    063.        </telerik:RadPane>
    064. 
    065.      <%--Splitter Bar--%>
    066.      <telerik:RadSplitBar id="RadSplitbar1" runat="server">
    067.      </telerik:RadSplitBar>
    068. 
    069.      <%--Main Pane--%>
    070.      <telerik:RadPane id="MiddlePane" runat="server" Scrolling="None">
    071.               <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    072.                <ContentTemplate>
    073.                    <div id="TabDiv" class="tabcontainer" style="margin:0px;border-width:0px; padding:0px;border:none;">
    074.                        <ul class="tabs">
    075.                            <li><a href="#W#" class="tab-link current">W</a></li>                  
    076.                            <li><a href="#S1#" class="tab-link">S1</a></li>                 
    077.                            <li><a href="#S2#" class="tab-link">S2</a></li>   
    078.                            <li><a href="#S3#"  class="tab-link">S3</a></li>                  
    079.                            <li><a href="#R#" class="tab-link">R</a></li>
    080.                        </ul>
    081.                        <div id="W#" class="tab-content">
    082.                        </div>
    083.                        <div id="S1#" class="tab-content">
    084.                         <div >
    085.                         </div>
    086.                        </div>
    087.                        <div id="S2#" class="tab-content">
    088.                         <div >
    089.                         </div>
    090.                        </div>
    091.                        <div id="S3#" class="tab-content">
    092.                         <div >
    093.                         </div>
    094.                        </div>
    095.                        <div id="R#" class="tab-content">
    096.                         <div >
    097.                         </div>
    098.                        </div>
    099.                    </div>
    100.               </ContentTemplate>
    101.               </asp:UpdatePanel
    102.           </telerik:RadPane>
    103.    </telerik:RadSplitter>
  2. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 11 Mar 2014 Link to this post

    Hello Jermaine,

    I am afraid that RadFileExplorer does not support setting height in percentage and cannot be achieved out-of-the-box. The main reason for that is that there are many nested controls inside it which size calculation depends on the FileExplorer's height (like Splitter, Grid, etc).

    Currently the control supports fully fluid designs, meaning that you can use it with width set to 100%.

    Regards,
    Vessy
    Telerik

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Guss
    Guss avatar
    26 posts
    Member since:
    Nov 2011

    Posted 02 Apr 2015 Link to this post

    See http://www.telerik.com/forums/set-height-to-100-problem#hYxTBjqNuE6PLnE0uW-eJg for ho wit is done fully responsive and height 100% to the container to bottom of page.
Back to Top