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

Set Height to 100% problem

35 Answers 612 Views
FileExplorer
This is a migrated thread and some comments may be shown as answers.
Patric Svensson
Top achievements
Rank 1
Patric Svensson asked on 13 Mar 2009, 01:20 PM
Hello,

I can't set the hight to 100%, only the width.

My code:

 

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

 

 

OnClientItemSelected="OnClientItemSelected" style="display:block; float: none">

 

35 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
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.
0
Anderson
Top achievements
Rank 1
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?
0
Svetlina Anati
Telerik team
answered on 08 Jul 2009, 12:07 PM
Hello Anderson,

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

  1. 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.
  2. 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.
0
Anderson
Top achievements
Rank 1
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",TahomaArial;  
    font-size:12px;  
}  
 
*  
{  
    font-family"微软雅黑""Segoe UI",TahomaArial !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(); });  
 

 

0
Anderson
Top achievements
Rank 1
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.
0
Svetlina Anati
Telerik team
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.
0
Andrew
Top achievements
Rank 1
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
0
Fiko
Telerik team
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.
0
eyal
Top achievements
Rank 1
answered on 11 Mar 2010, 02:23 PM
Hello Fiko,

I have the same problem as Andrew described before. I would like to dynamically set the height of the RadFileExplorer so that it optimally fits the client's browser window size. It should occupy most of the window height.

Is there any way to overcome the limitations you described and accomplish it using javascript?  in case not, are you planning to provide such functionality in future versions?

br,
eyal


ps. i'm curently use version 2009.3.1407.35

0
Dobromir
Telerik team
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.
0
eyal
Top achievements
Rank 1
answered on 16 Mar 2010, 08:52 AM
Thank you Dobromir for the quick reply.
Please consider this issue in high priority. From a usability and aesthetics perspective, it does not look good when the FileExplorer occupies only half of the browser window-height (in high resolution screens).

br,
eyal
0
Dobromir
Telerik team
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

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.
0
Jacob Button
Top achievements
Rank 1
answered on 20 Apr 2010, 04:34 PM
Hi,

Don't mean to bother anyone, I know the issue is on your TODO list.  However I was wondering if any progress has been made on it thus far?  I too, am waiting anxiously for this functionality.

If its easier, to start out a set_height and set_width, or resize(width, height) javascript methods would be more than enough for me to get my desired functionality right now.

Or maybe somebody has already created standalone methods for this that they'd be willing to share?
0
Jacob Button
Top achievements
Rank 1
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
0
Christian Robert Schulz
Top achievements
Rank 1
answered on 01 Feb 2011, 12:20 AM
Thank you, Jacob, your jquery code works fine for me! :-)
0
Devin
Top achievements
Rank 1
answered on 04 Mar 2011, 06:20 PM
Thank you, Svetlina.  Your CSS code fixed a problem I was having with sizing in my project.

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

0
Joshua
Top achievements
Rank 1
answered on 23 Mar 2011, 06:30 PM
Jacob ,

Thank you SO MUCH for your solution. I just tested it out and it works perfect. Saved me tons of work!!

Seriously, thanks again. :-)

-Josh

0
Robert
Top achievements
Rank 1
answered on 08 Nov 2011, 03:43 PM
I'm working with the code to allow for a RadFileExplorer control to resize as a web page resizes;

In debug mode, all the JavaScript works properly - with variables defined, etc;

The issue is in the following line:  var grid = explorer.get_grid();

grid is coming back null, and the explorer variable is assigned properly - var explorer = $find("<%=RadExplorer1.ClientID %>");

Any insight is appreciated;  Best regards - Rob
0
Steve
Top achievements
Rank 1
answered on 11 Nov 2011, 07:05 PM
I am also wanting to use Jacob Buttons method to resize the file explorer but am having the similar issues as Rob but mine are with the get_element = undefined, any insight or updates/soulutions?
0
Dobromir
Telerik team
answered on 14 Nov 2011, 05:40 PM
Hi guys,

A possible reason for the issue that you experience is that the jQuery's $(document).ready() does not ensure that the client-side object of the server controls are loaded when the code of the $(document).ready() is executed. To ensure that all controls' client-side objects are fully loaded you need to use Sys.Application.add_load() instead.

Sincerely yours,
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.
0
Mostafa
Top achievements
Rank 1
answered on 08 Mar 2012, 03:31 AM

i try your code but i have this error 

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

thanks for anyhelp 

0
Pero
Telerik team
answered on 12 Mar 2012, 09:59 AM
Hi Mostafa,

Could you please add RadScriptBlock to your page? Here is more info on the subject: http://www.telerik.com/help/aspnet-ajax/ajax-radscriptblock-radcodeblock.html.

Regards,
Pero
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.
0
Rohan
Top achievements
Rank 1
answered on 19 Jun 2012, 01:18 PM
Hi jacob,

I want set the file explorer width in percentage . i play with your  code but i am not getting result .. i am able to set width to 100%.
0
Rohan
Top achievements
Rank 1
answered on 22 Aug 2012, 11:10 AM
Hi all
i want to set width of File explorer control , width=100% , after to set the width of file explorer my control look like as shown in screen shot during the page load or any post back in screen .

i also want to change the log of Dro-Box Upload and User folder button , these are RadToolBarButton


0
Vessy
Telerik team
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.
0
Rohan
Top achievements
Rank 1
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 ?
0
Vessy
Telerik team
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
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.
0
Marco
Top achievements
Rank 1
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
0
Guss
Top achievements
Rank 2
Veteran
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>
 </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" %>
 
    <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>
0
Guss
Top achievements
Rank 2
Veteran
answered on 03 Apr 2015, 02:24 AM
.PS: And it not just resize to the container and full height, but it is now also responsive.... PC to tablet to iPhone.
0
Guss
Top achievements
Rank 2
Veteran
answered on 03 Apr 2015, 02:28 AM
Screenshot of result
0
Vessy
Telerik team
answered on 03 Apr 2015, 02:06 PM
Hi Guss,

Thank you for sharing your solution with our community. Please, feel free to post the custom solution you implemented in the code library section on our site here: FileExplorer Code Libraries.

You will be rewarded with some Telerik points for the effort which can be used as a discount for future purchases/upgrades of our controls.

Regards,
Vessy
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Guss
Top achievements
Rank 2
Veteran
answered on 03 Sep 2016, 09:40 PM

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.

0
hart
Top achievements
Rank 1
Veteran
answered on 22 May 2020, 12:07 PM
this does not work in webForms
0
Vessy
Telerik team
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.
Tags
FileExplorer
Asked by
Patric Svensson
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Anderson
Top achievements
Rank 1
Andrew
Top achievements
Rank 1
Fiko
Telerik team
eyal
Top achievements
Rank 1
Dobromir
Telerik team
Jacob Button
Top achievements
Rank 1
Christian Robert Schulz
Top achievements
Rank 1
Devin
Top achievements
Rank 1
Joshua
Top achievements
Rank 1
Robert
Top achievements
Rank 1
Steve
Top achievements
Rank 1
Mostafa
Top achievements
Rank 1
Pero
Telerik team
Rohan
Top achievements
Rank 1
Vessy
Telerik team
Marco
Top achievements
Rank 1
Guss
Top achievements
Rank 2
Veteran
hart
Top achievements
Rank 1
Veteran
Share this question
or