Set Height to 100% problem

34 posts, 0 answers
  1. Patric Svensson
    Patric Svensson avatar
    14 posts
    Member since:
    Nov 2006

    Posted 13 Mar 2009 Link to this post

    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">

     

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Mar 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Anderson
    Anderson avatar
    3 posts
    Member since:
    Mar 2007

    Posted 08 Jul 2009 Link to this post

    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?
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 08 Jul 2009 Link to this post

    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.
  6. Anderson
    Anderson avatar
    3 posts
    Member since:
    Mar 2007

    Posted 08 Jul 2009 Link to this post

    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(); });  
     

     

  7. Anderson
    Anderson avatar
    3 posts
    Member since:
    Mar 2007

    Posted 08 Jul 2009 Link to this post

    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.
  8. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 09 Jul 2009 Link to this post

    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.
  9. Andrew
    Andrew avatar
    70 posts
    Member since:
    Oct 2008

    Posted 12 Oct 2009 Link to this post

    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
  10. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 15 Oct 2009 Link to this post

    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.
  11. eyal
    eyal avatar
    54 posts
    Member since:
    Sep 2009

    Posted 11 Mar 2010 Link to this post

    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

  12. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 15 Mar 2010 Link to this post

    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.
  13. eyal
    eyal avatar
    54 posts
    Member since:
    Sep 2009

    Posted 16 Mar 2010 Link to this post

    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
  14. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 18 Mar 2010 Link to this post

    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.
  15. Jacob Button
    Jacob Button avatar
    5 posts
    Member since:
    Jan 2010

    Posted 20 Apr 2010 Link to this post

    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?
  16. Jacob Button
    Jacob Button avatar
    5 posts
    Member since:
    Jan 2010

    Posted 20 Apr 2010 Link to this post

    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
  17. Christian Robert Schulz
    Christian Robert Schulz avatar
    2 posts
    Member since:
    Jun 2010

    Posted 31 Jan 2011 Link to this post

    Thank you, Jacob, your jquery code works fine for me! :-)
  18. Devin
    Devin avatar
    1 posts
    Member since:
    Jan 2011

    Posted 04 Mar 2011 Link to this post

    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; 
    }

  19. Joshua
    Joshua avatar
    11 posts
    Member since:
    Dec 2010

    Posted 23 Mar 2011 Link to this post

    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

  20. Robert
    Robert  avatar
    68 posts
    Member since:
    Feb 2009

    Posted 08 Nov 2011 Link to this post

    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
  21. Steve
    Steve avatar
    1 posts
    Member since:
    Oct 2011

    Posted 11 Nov 2011 Link to this post

    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?
  22. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 14 Nov 2011 Link to this post

    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.
  23. Mostafa
    Mostafa avatar
    2 posts
    Member since:
    Mar 2011

    Posted 07 Mar 2012 Link to this post

    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 

  24. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 12 Mar 2012 Link to this post

    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.
  25. Rohan
    Rohan avatar
    94 posts
    Member since:
    Jul 2012

    Posted 19 Jun 2012 Link to this post

    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%.
  26. Rohan
    Rohan avatar
    94 posts
    Member since:
    Jul 2012

    Posted 22 Aug 2012 Link to this post

    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


  27. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 24 Aug 2012 Link to this post

    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.
  28. Rohan
    Rohan avatar
    94 posts
    Member since:
    Jul 2012

    Posted 24 Aug 2012 Link to this post

    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 ?
  29. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 29 Aug 2012 Link to this post

    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.
  30. Marco
    Marco avatar
    1 posts
    Member since:
    Jul 2011

    Posted 04 Sep 2013 Link to this post

    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
  31. Guss
    Guss avatar
    26 posts
    Member since:
    Nov 2011

    Posted 02 Apr 2015 Link to this post

    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>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017