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

Resize FileExplorer to Parent Container

2 Answers 141 Views
FileExplorer
This is a migrated thread and some comments may be shown as answers.
Jermaine
Top achievements
Rank 1
Jermaine asked on 06 Mar 2014, 07:53 PM
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 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 11 Mar 2014, 04:19 PM
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.

0
Guss
Top achievements
Rank 2
Veteran
answered on 03 Apr 2015, 02:34 AM
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.
Tags
FileExplorer
Asked by
Jermaine
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Guss
Top achievements
Rank 2
Veteran
Share this question
or