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

Set Height to 100% problem

35 Answers 1374 Views

FileExplorer

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

35 Answers, 1 is accepted

answered on 16 Mar 2009, 11:23 AM

Hi Patric,

Would you please insert the following style in your page's head:

    
            html, body, form  
        
            {  
        
               height: 100%;  
        
               margin: 0;  
        
               padding: 0;  
        
            }

Note, also , that if the RadFileExplorer has parent elements, e.g DIV, TD, TR, TABLE, etc, you should also explicitly set height for them, too.

All the best,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 08 Jul 2009, 09:40 AM

it doesn't work for me.
my css file

    
            html,body,form  
        
            {  
        
                height:100%;  
        
                width:100%;  
        
                margin:0;  
        
                padding:0;  
        
                cursor:default;  
        
                overflow:hidden;  
        
            }

my code

    
                <telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" DisplayUpFolderItem="True" Skin="Office2007" Width="100%" Height="100%">  
        
            <Configuration SearchPatterns="*.*"></Configuration> 
        
                </telerik:RadFileExplorer>

it dosen't work. and the border of the control looks like it's about 100px high.

how can i fix this problem?

answered on 08 Jul 2009, 12:07 PM

Hello Anderson,

The only things I can suggest without examining your code are the following ones:

Make sure that if the RadFileExplorer has parent elements, e.g DIV, TD, TR, TABLE, etc, you should also explicitly set height for them, too, as already explained.
Make sure that your page is in XHTML mode and not in quirks mode.

If this does not help, please share more of your code along with the CSS you have used and we will do our best to help.

Regards,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 08 Jul 2009, 01:19 PM

I used a masterpage and I wrote a javascript to control the elements on this page auto fit the height. the div named "defautView" is auto height (control by js). when I insert a div into "defaultView" and set it's height to 100%, it works well, or I use the RadSplitter and set it's height to 100%, it works well too. But RadFileExplorer does't work with height=100%.

My English is poor, I hope you can understand what I said. Thanks for your help.

the masterpage

    
            <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="BaseFramework.master.cs" Inherits="SiteBuilder.BaseSite.BaseFramework" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server">  
        
                <title></title>  
        
                <link href="~/Global/Css/Framework/default.css" rel="stylesheet" type="text/css" /> 
        
                <script src="~/Global/Libs/jquery-1.3.2.js" type="text/javascript"></script> 
        
                <!--[if IE 6]> 
        
                    <script src="~/Global/Libs/DD_belatedPNG_0.0.7a-min.js" type="text/javascript"></script> 
        
                    <script type="text/javascript">  
        
                        DD_belatedPNG.fix('a, img');  
        
                    </script> 
        
                <![endif]--> 
        
                <script src="~/Global/Libs/Framework.js" type="text/javascript"></script> 
        
                <asp:ContentPlaceHolder ID="head" runat="server">  
        
                </asp:ContentPlaceHolder> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="BaseScriptManager" runat="server" EnableTheming="True">  
        
                </telerik:RadScriptManager> 
        
                <div id="FunctionControlArea">  
        
                    <div id="PanelFunctionHolder" class="FunctionButtonsHolder">  
        
                        <asp:Panel ID="pnlFunctionButtonsPanel" CssClass="FunctionButtonsHolder" runat="server">  
        
                            <asp:HyperLink ID="btnPrev" CssClass="PrevButtonDisabled" runat="server" ToolTip="返回上个功能"></asp:HyperLink> 
        
                            <asp:HyperLink ID="btnHome" CssClass="HomeButton" runat="server" ToolTip="返回管理主页"></asp:HyperLink> 
        
                            <asp:Panel ID="pnlExtraFunctionButtonsPanel" runat="server"></asp:Panel> 
        
                            <asp:LinkButton ID="btnLogout" CssClass="LogoutButton" runat="server" ToolTip="注销此次登录" OnClientClick="fnConfirmLogout(event)"></asp:LinkButton> 
        
                        </asp:Panel> 
        
                    </div> 
        
                    <div id="PanelMenuHolder"><div id="menuPosition"><telerik:RadMenu ID="menuMain" runat="server" Skin="WebBlue" CausesValidation="false"></telerik:RadMenu></div></div> 
        
                    <asp:ContentPlaceHolder ID="function" runat="server"></asp:ContentPlaceHolder> 
        
                </div> 
        
                <div id="DefaultViewArea"><asp:ContentPlaceHolder ID="view" runat="server"></asp:ContentPlaceHolder> 
        
                </div> 
        
                <div id="TaskControlArea"><asp:ContentPlaceHolder ID="task" runat="server"></asp:ContentPlaceHolder></div>  
        
                </form> 
        
            </body> 
        
            </html>

the css file

    
            html,body,form  
        
            {  
        
                height:100%;  
        
                width:100%;  
        
                margin:0;  
        
                padding:0;  
        
                cursor:default;  
        
                overflow:hidden;  
        
            }  
        
            body  
        
            {  
        
                font-family: "微软雅黑", "Segoe UI",Tahoma, Arial;  
        
                font-size:12px;  
        
            }  
        
            *  
        
            {  
        
                font-family: "微软雅黑", "Segoe UI",Tahoma, Arial !important;  
        
            }  
        
            /* ================= Elements ================= */ 
        
            #PanelFunctionHolder  
        
            {  
        
                display:block;  
        
                height:60px;  
        
                background:url(../../Images/Framework/FunctionPanelBG.png) repeat-x;  
        
                position:relative;  
        
            }  
        
            #PanelFunctionHolder div.FunctionButtonsHolder  
        
            {  
        
                padding-top:3px;  
        
                margin-left:10px;  
        
            }  
        
            #PanelFunctionHolder div.FunctionButtonsHolder a  
        
            {  
        
                display:block;  
        
                width:54px;  
        
                height:54px;  
        
                margin:0;  
        
                float:left;  
        
                cursor:pointer;  
        
            }  
        
            #PanelFunctionHolder div.FunctionButtonsHolder a.PrevButton  
        
            {  
        
                background:url(../../images/framework/FunctionButtons.png) 0 0 no-repeat;  
        
            }  
        
            #PanelFunctionHolder div.FunctionButtonsHolder a.PrevButton:hover  
        
            {  
        
                background:url(../../images/framework/FunctionButtons.png) 0 -54px no-repeat;  
        
            }  
        
            #PanelFunctionHolder div.FunctionButtonsHolder a.PrevButton:active  
        
            {  
        
                background:url(../../images/framework/FunctionButtons.png) 0 -54px no-repeat;  
        
            }  
        
            #PanelFunctionHolder div.FunctionButtonsHolder a.PrevButtonDisabled  
        
            {  
        
                background:url(../../images/framework/FunctionButtons.png) 0 -108px no-repeat;  
        
            }  
        
            #PanelFunctionHolder div.FunctionButtonsHolder a.HomeButton  
        
            {  
        
                background:url(../../images/framework/FunctionButtons.png) -54px 0 no-repeat;  
        
            }  
        
            #PanelFunctionHolder div.FunctionButtonsHolder a.HomeButton:hover  
        
            {  
        
                background:url(../../images/framework/FunctionButtons.png) -54px -54px no-repeat;  
        
            }  
        
            #PanelFunctionHolder div.FunctionButtonsHolder a.HomeButton:active  
        
            {  
        
                background:url(../../images/framework/FunctionButtons.png) -54px -54px no-repeat;  
        
            }  
        
            #PanelFunctionHolder div.FunctionButtonsHolder a.HomeButtonDisabled  
        
            {  
        
                background:url(../../images/framework/FunctionButtons.png) -54px -108px no-repeat;  
        
            }  
        
            #PanelFunctionHolder div.FunctionButtonsHolder a.LogoutButton  
        
            {  
        
                background:url(../../images/framework/FunctionButtons.png) -108px 0 no-repeat;  
        
            }  
        
            #PanelFunctionHolder div.FunctionButtonsHolder a.LogoutButton:hover  
        
            {  
        
                background:url(../../images/framework/FunctionButtons.png) -108px -54px no-repeat;  
        
            }  
        
            #PanelFunctionHolder div.FunctionButtonsHolder a.LogoutButton:active  
        
            {  
        
                background:url(../../images/framework/FunctionButtons.png) -108px -54px no-repeat;  
        
            }  
        
            #PanelMenuHolder  
        
            {  
        
                display:block;  
        
                height:26px;  
        
                background:url(../../Images/Framework/PanelMenuBG.gif) repeat-x;  
        
                padding:0 10px;  
        
            }  
        
            #PanelMenuHolder #menuPosition  
        
            {  
        
                display:block;  
        
                position:absolute;  
        
                z-index:1;  
        
            }  
        
            #PanelMenuHolder .rmHorizontal  
        
            {  
        
                border-left-style:none !important;  
        
                border-right-style:none !important;  
        
            }  
        
            #DefaultViewArea  
        
            {  
        
                overflow:hidden;  
        
            }  
        
            div.ViewWithVerticalScrollBar  
        
            {  
        
                overflow:hidden;  
        
                overflow-y:scroll;  
        
                width:100%;  
        
                height:100%;  
        
            }  
        
            div.ViewWithVerticalScrollBarAuto  
        
            {  
        
                overflow:auto;  
        
                width:100%;  
        
                height:100%;  
        
            }  
        
            div.ViewWithVerticalScrollBarAuto div.Inner  
        
            {  
        
                padding:5px;  
        
                display:block;  
        
            }  
        
            div.Toolbar  
        
            {  
        
                display:block;  
        
                height:32px;  
        
                overflow:hidden;  
        
                background:#2c3c4d;  
        
                color:#fff;  
        
            }  
        
            div.Topbar  
        
            {  
        
                display:block;  
        
                overflow:hidden;  
        
                background:#2c3c4d;  
        
                color:#fff;  
        
                padding:5px;  
        
                position:relative;  
        
            }  
        
            .Button  
        
            {  
        
                display:block;  
        
                background:url(../../images/edtButtonBack.gif) repeat-x top left;  
        
                height:22px;  
        
                line-height:22px;  
        
                vertical-align:middle;  
        
                text-align:center;  
        
                min-width:60px;  
        
                border:solid 1px #ccc;  
        
                color:#000;  
        
                text-decoration:none;  
        
                float:left;  
        
                margin-right:5px;  
        
            }  
        
            .Button:hover  
        
            {  
        
                background:url(../../images/edtButtonCheckedBack.gif) repeat-x top left;  
        
            }

the js

    
            var defaultView = new function() {  
        
                var viewHeight = 0;  
        
                var viewWidth = 0;  
        
                var _this = this;  
        
                _this.getWidth = function() {  
        
                    return viewWidth;  
        
                };  
        
                _this.getHeight = function() {  
        
                    return viewHeight;  
        
                };  
        
                _this.resizeView = function() {  
        
                    placeDesktopElement();  
        
                };  
        
                function placeDesktopElement() {  
        
                    var windowHeight = $(document.body).height();  
        
                    var functionAreaHeight = $("#FunctionControlArea").height();  
        
                    var taskAreaHeight = $("#TaskControlArea").height();  
        
                    var viewAreaHeight = 0;  
        
                    try {  
        
                        viewAreaHeight = windowHeight - (functionAreaHeight + taskAreaHeight);  
        
                        $("#DefaultViewArea").height(viewAreaHeight);  
        
                        viewHeight = viewAreaHeight;  
        
                        viewWidth = $("#DefaultViewArea").width();  
        
                        $("div[id^='ctl'][id*='_view_'][id$='Panel']").css("height","100%");  
        
                    }  
        
                    catch (e) {  
        
                    }  
        
                };  
        
                $(function() {  
        
                    $(window).bind("resize", placeDesktopElement);  
        
                    placeDesktopElement();  
        
                });  
        
            }  
        
            var fnConfirmLogout = function(event) {  
        
                var e = event || window.event  
        
                var ret = window.confirm("您确实要注销此次登录吗？");  
        
                if (ret == false) {  
        
                    if (window.event)  
        
                        e.returnValue = false;  
        
                    else 
        
                        e.preventDefault();  
        
                }  
        
            }  
        
            $(function() { defaultView.resizeView(); });

answered on 08 Jul 2009, 01:43 PM

I add a new page, and test like this

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SiteBuilder.BaseSite.WebForm1" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server">  
        
                <title></title>  
        
                <style type="text/css">  
        
                    html, body, form  
        
                    {  
        
                        height:100%;  
        
                        width:100%;  
        
                        margin:0;  
        
                        padding:0;  
        
                        overflow:hidden;  
        
                    }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" Width="100%" Height="100%">  
        
                </telerik:RadFileExplorer> 
        
                </form> 
        
            </body> 
        
            </html>

it doesn't work.

answered on 09 Jul 2009, 11:50 AM

Hi Anderson,

Please, accept my sincere apologies for providing incorrect information. The RadFileExplorer control does not support percentages size and I was under the contrary impression because the container is a splitter and the tips I provided are useful to make the splitter 100%. However, this will not resize the inner treeview and grid to 100% and that is why you can set the RadFileExplorer size only in pixels.

I apologize once again for my mistake and for wasting your time and efforts.

Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 12 Oct 2009, 03:08 PM

Hi,

In fact setting the WIDTH to 100% does work, the problem occurs with the height. We have had this problem with ajaxified grids and it seems to be tied up with a particular DIV which is wrapped round the grid when Ajax is being used.

Presumably this is a matter of finding which div generated as part of the file manager is causing the problem and giving it a 100% height too.

The problem with using a fixed height is the usual one that one often wants the page to fill the residual browser window (after any header, footer and side panels have taken their space), this allows for the idea that users will have diferent screen resolutions and sizes and may also wnat their browser window to be convenient for them (not us). By having a 100% x 100% which works, then when things don't fit a nice scroll bar appears and they can still work the form.

After various struggles I have my grids growing and shrinking nicely - there are some annoying cosmetic problems with different browsers (whch behave a little differently) and are not fully accomodated by the Telerik UI components, so I am finding it annoying that I can't get the File Explorer to work properly - I coudl of course make up my ownusing a tree and a grid in a panel set, but that sort of reduces the benefit of buyign the Telerik controls.

If I get time (and boy it does take time), I will look for a solution, but of course it woudlbe nice if someone with inside knowledge could sort this out

answered on 15 Oct 2009, 12:24 PM

Hello Andrew,

The RadFileExplorer control is based on a several other controls and it cannot manage the size of these controls if relative size is used. That is why, the control can be used with fixed values only and this restriction is by design and cannot be overridden. You need to specify the values in the RadFileExplorer declaration. Note that the size of the control cannot be changed - the control does not have set_width() or set_height functions.

Greetings,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 15 Mar 2010, 05:46 PM

Hi Eyal,

As Fiko said in his last post, these limitations are set because some of the components of the RadFileExplorer control rely on fixed sizes to render properly. The calculations regarding RadFileExplorer's size are made on the server and cannot be modified using JavaScript. For the time being, we cannot provide any suitable workarounds.

At present we are unable to provide such functionality because it is not supported by some of the controls that are used by RadFileExplorer. We plan to introduce this as soon as we are able to overcome the limitations set by the used controls.

Regards,
Dobromir
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

answered on 18 Mar 2010, 03:21 PM

Hi Eyal,

This problem is already logged in our TODO list. I will bring it to the attention of our developers once again in order to rise its priority. But as I mentioned in my previous post, RadFileExplorer is a complex control and in favor of performance some of the calculations are done on the server. Unfortunately I cannot give an estimate time when this issue will be fixed.

Kind regards,
Dobromir
the Telerik team

answered on 20 Apr 2010, 07:03 PM

Im not sure how Telerik feels about me posting this here, so if any moderators want this removed, please do so.

Anyway, this is my current solution for resizing the FileExplorer with the page. Its using javascript and jquery. Obviously you'll have to modify it for your own use. I'm not displaying the AddressBar in my file explorer, so my height resize doesn't account for that.

    
            var resized = false; 
        
            var IE7 = (navigator.appVersion.indexOf("MSIE 7.") == -1) ? false : true; 
        
            setTimeout(function () { if (!resized) { ResizeExplorer(); } }, 1500); 
        
            (function ($) { 
        
                $(document).ready(function () { 
        
                    ResizeExplorer() 
        
                }); 
        
                $(window).resize(function () { 
        
                    ResizeExplorer() 
        
                }); 
        
            })($telerik.$); 
        
            function ResizeExplorer() { 
        
                //you'll need to modify this (this is the wrapper of content area where the file explorer resides) 
        
                var height = $("div[ID$='ApplicationContentWrapper']").height(); 
        
                if (IE7) { height -= 5; } 
        
                var width = ($("div[ID$='ApplicationContentWrapper']").width()); 
        
                //Change RadFileExplorer1 to the ID of your fileExplorer 
        
                var explorer = $find("<%=RadFileExplorer1.ClientID %>"); 
        
                var domSplitter = $("div[ID$='splitter']").attr("id"); 
        
                if (explorer) { 
        
                    resized = true; 
        
                    var grid = explorer.get_grid(); 
        
                    var div = explorer.get_element(); 
        
                    var toolbar = explorer.get_toolbar(); 
        
                    var splitter = $find(domSplitter); 
        
                    //resize explorer container div 
        
                    div.style.height = height + "px" 
        
                    div.style.width = width + "px" 
        
                    div.style.border = "0px"; 
        
                    //resize splitter 
        
                    splitter.resize(width, height - toolbar.get_element().offsetHeight); 
        
                    //resize grid height 
        
                    grid.get_element().style.height = (height - toolbar.get_element().offsetHeight) + "px"; 
        
                    grid.repaint(); 
        
                } 
        
            }

hope this helps people until telerik can get this functionality built in

answered on 24 Aug 2012, 12:15 PM

Hi Rohan,

By design RadFileExplore does not support width in percents, which is different than 100%. As a workaround for that behavior you could wrap the FileExplore in an additional div, settineg the the desired width to the div:

<div style="width:80%">

<telerik:RadFileExplorer ID="FileExplorer1" runat="server" Width="100%">

<Configuration ViewPaths="~/" />

</telerik:RadFileExplorer>

</div>

Regarding your second question, I am not quite sure if I understand the exact issue. In so far as I can see on the image, there are several custom settings in your setup (additional columns, buttons etc) so could you please describe in more details the exact scenario, what is the expected and what is the actual behavior?

Could you please open a formal support ticket and provide a simple fully runnable project reproducing the problem so we can investigate it further?

Greetings,
Veselina
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 24 Aug 2012, 02:58 PM

Hi Vaselina,

Thanks for replay ,

Still i am facing the same issues .
My code is

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<div style=" width: 99%; height: 500px;" id="ApplicationContentWrapper" >
        <telerik:RadFileExplorer runat="server" ID="FileExplorer1" CssClass="rfeFocus" AllowPaging="true"
            PageSize="20" OnClientItemSelected="OnClientItemSelected" OnExplorerPopulated="FileExplorer1_ExplorerPopulated"
            EnableFilterTextBox="true" Width="100%" OnClientFileOpen="explorerFileOpen" OnClientCreateNewFolder="OnClientCreateNewFolder"
            OnClientMove="OnClientMove" EnableCopy="true" VisibleControls="ContextMenus,Grid,Toolbar,TreeView"
            OnClientLoad="OnClientLoad" OnClientFolderChange="OnClientFolderChange" OnClientFolderLoaded="OnClientFolderLoaded"
            EnableAsyncUpload="true" >
            <Configuration DeletePaths="~/DesktopModules/ATI.FileExchange/Images" />
            <KeyboardShortcuts FocusFileExplorer="Ctrl+f2" FocusToolBar="Shift+1" FocusAddressBar="Shift+2"
                FocusTreeView="Shift+3" FocusGrid="Shift+4" FocusGridPagingSlider="Shift+5" UploadFile="Ctrl+u"
                Back="Ctrl+k" Forward="Ctrl+l" NewFolder="Ctrl+n" Refresh="Ctrl+f3" ContextMenu="Shift+m" />
        </telerik:RadFileExplorer>
</div>
</telerik:RadAjaxPanel>

is there any version problem ?

answered on 29 Aug 2012, 12:37 PM

Hi Rohan,

I tried to reproduce the issue with the example code you sent but to no avail. Everything behaves well during the POST Back on our side.

Nevertheless, I noticed that your RadFileExplorer is wrapped inside a RadAjaxPanel. RadFileExplorer's functionality is heavily based on client-side callbacks and it is highly not recommended to be externally ajaxified. Could you, please, remove this AjaxPanel and see if the problem still occurs.

If this is not the case, it would be of great help if you prepare and send a sample fully runnable project reproducing the issue so we could examine and debug it locally.

Greetings,
Veselina
the Telerik team

answered on 04 Sep 2013, 04:26 PM

Hi Everyone,

Too bad that this control cannot provide dynamic height. this is a basic need...

I didn't want to give up on this control just because of the height, so here is my implementation (server side). Hope this helps other developers

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
SetRadFileExplorerSize()
End If
End Sub

Private Sub SetRadFileExplorerSize()

'define your allowed folders and files list in your config file
Dim IncludedFileTypes As String = AppSettings("FileBrowser_IncludedFileTypes")
Dim ExcludedFolders As String = AppSettings("FileBrowser_ExcludedFolders")
Dim ExcludeFiles As String = AppSettings("FileBrowser_ExcludedFiles")

Dim CurrentDirectory As System.IO.DirectoryInfo = New System.IO.DirectoryInfo(MapPath(Request.ServerVariables("PATH_INFO").Substring(0, Request.ServerVariables("PATH_INFO").LastIndexOf("/") + 1)))

Dim Directories As FileSystemInfo() = CurrentDirectory.GetDirectories("*")
Dim Dir As System.IO.DirectoryInfo
Dim File As System.IO.FileInfo
Dim TotalItems As Integer = 0

'Get files in root
For Each File In CurrentDirectory.GetFiles
If IncludedFileTypes.IndexOf(File.Extension.ToLower) >= 0 Then
If ExcludeFiles.IndexOf(File.Name.ToLower()) < 0 Then
TotalItems += 1
End If
End If
Next

'Get the rest of the folders and files
For Each Dir In Directories

If ExcludedFolders.IndexOf(Dir.Name.ToLower()) < 0 Then
TotalItems += 1
End If

For Each File In Dir.GetFiles
If IncludedFileTypes.IndexOf(File.Extension.ToLower) >= 0 Then
If ExcludeFiles.IndexOf(File.Name.ToLower()) < 0 Then
TotalItems += 1
End If
End If
Next
Next

'24 is the approximate height for each item in list. you may need to change this number
'********
RadFileExplorer_1.Height = TotalItems * 24
'*********

End Sub

answered on 03 Apr 2015, 02:19 AM

Hi, I have the file explorer within a bootstrap 3 page (see the starting template of bootstap called Dashboard) This code does it for me. (the js is Jacob Button's JS, slightly modified)

Below is the markup inside div (class='row') and div (class='col-md-12'). I gave the last div wrapper an id so that I can reference it.

<div class="row">

<div id="explorerwrapper" class="col-md-12">

<telerik:RadFileExplorer ID="RadFileExplorerDocuments" runat="server" Width="100%">

<Configuration ViewPaths="~/Repository" UploadPaths="~/Repository" DeletePaths="~/Repository" MaxUploadFileSize="2048000"></Configuration>

</telerik:RadFileExplorer>

</div>

And this is the javascript inside the <head> tags.

<script type="text/javascript">

window.addEventListener("resize", resizeExplorer);

var resized = false;

var IE7 = (navigator.appVersion.indexOf("MSIE 7.") == -1) ? false : true;

function pageLoad() {

resizeExplorer()

}

function resizeExplorer() {

var side = siderbar.clientHeight; // (my #sidebar in bootstrap dashboard is already stretching the height)

var nav = navbar.clientHeight; // (my #navbar header in bootstrap dashboard template)

var header = pageheader.clientHeight; // (I have a <h2> header at the top of all content pages, its id is pageheader)

var height = side - nav - header - 60; //(60px is margins)

var width = explorerwrapper.clientWidth;

width = width - 30; (30px is horizontal margins)

if (IE7) {

height -= 5;

}

var explorer = $find("<%=RadFileExplorerDocuments.ClientID %>");

var domSplitter = $("div[ID$='splitter']").attr("id");

if (explorer) {

resized = true;

var grid = explorer.get_grid();

var div = explorer.get_element();

var toolbar = explorer.get_toolbar();

var splitter = $find(domSplitter);

//resize explorer container div

div.style.height = height + "px";

div.style.width = width + "px";

//div.style.border = "1px"; // I like the border, so I keep it

//resize splitter

splitter.resize(width, height - toolbar.get_element().offsetHeight);

//resize grid height

grid.get_element().style.height = (height - toolbar.get_element().offsetHeight) + "px";

grid.repaint();

}

</script>

Hope it helps
Below some other stuff that may also help (my master page top section:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Dashboard.master.cs" Inherits="Goalpost.Dashboard" %>

<%@ Register Src="~/Controls/Menu.ascx" TagPrefix="gp" TagName="Menu" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta charset="utf-8"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<title>Goalpost</title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server"/>

<link href="css/bootstrap.min.css" rel="stylesheet"/>

<link href="css/dashboard.min.css" rel="stylesheet"/>

<link href="css/font-awesome.min.css" rel="stylesheet"/>

<link href="css/override.min.css" rel="stylesheet"/>

<asp:ContentPlaceHolder ID="Head" runat="server"></asp:ContentPlaceHolder>

</head>

answered on 03 Sep 2016, 09:40 PM

cloudstorage.jpg

Just another tip on that 100% height javascript.

I have spend hours on tweaking the code trying to find a 3px bug.
After the page has loaded and everything looks 100%, and you navigate to a new folder, it looks like the file explorer toolbar has changed in size. It not the toolbar that changed, but the page that scrolls out of view at the top with 3 pixels, and because you have body {overflow:hidden}, you do not realize that this is the case.

If you show the overflow, it cause more chaos, cause now there is ugly scrollbars all over, changing the visible width and heights again.

I first thought, let me just do a window.scoll(0,0) :-) but nope :-(, thats doesn't do a thing, the page is alreaady at the top, it the content inside the div wrapper, which cut it off !

THE SOLUTION:

Remove the declarative setting Height="100%" from the RadFileExplorer !
Afterwards I made it 99%, and still everything OK.

answered on 27 May 2020, 11:23 AM

Hi hart,

The sample provided by Guss targets the classic rendering of the controls and, respectively, the HTML elements used in it:
https://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes

The latest versions of the controls defaults to Lightweight rendering, so you will need to set the RenderMode="Classic" to all controls on the page. You can also do it globally by adding the following setting in the web.config:

<appSettings>
    <add key="Telerik.Web.UI.RenderMode" value="classic" />
</appSettings>

Regards,
Vessy
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Set Height to 100% problem

35 Answers, 1 is accepted