Setting the height of a Telerik RadFileExplorer to 100% with ASP.NET C#

With the requirement of the setting an entire frame to a RadFileExplorer the width can be set to 100% but it became evident that you simply cannot set the height to a 100%, you need to enter in a pixel value. However when the window is resized the height will not resize with it.

Declaring the RadFileExplorer in the body of your form:

<telerik:RadFileExplorer ID=”RadFileExplorer” runat=”server” ExplorerMode=”Default”

 OnClientLoad=”OnClientLoad” OnClientFileOpen=”OnClientFileOpen” 

OnClientItemSelected=”OnClientItemSelected” OnClientDelete=”OnClientDelete” 

OnClientFolderLoaded=”OnClientFolderChange” Width=”100%” Height=”1000px” />

 

Now for the body of the aspx form set an onresize function:

body onresize=”ResizeExplorer()”

The same function will also be called for the “OnClientLoad” event of the RadFileExplorer. In javascript using the following code will set the RadFileExplorer’s height to 100%.

function OnClientLoad(sender, args)
{
setTimeout(function() { ResizeExplorer(); }, 0);
var contextMenu = sender.get_gridContextMenu();
}
var resized = false;

/*
* Resize the RadFileExplorer
*/
function ResizeExplorer()
{
     // The name of the div the RadFileExplorer is in:
    var height = $("div[ID$='RadExplorerDiv']").height() - 20;
    var width = ($("div[ID$='RadExplorerDiv']").width());
    // The name of the RadFileExplorer goes here
    var explorer = $find("RadFileExplorer");
    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 the splitter 
        splitter.resize(width, height - toolbar.get_element().offsetHeight); 

        //resize the grid height 
        grid.get_element().style.height = (height - toolbar.get_element().offsetHeight) + "px"; 
        grid.repaint(); 
    }
}

One Comment

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *