Resize FileExplorer to Parent Container

[Jermaine]

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>

[Vessy]

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

[Guss]

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.