Resizing

17 Aug 20164 minutes to read

The FileExplorer has the resize support through the resize handle which appears at right-bottom corner of footer. By clicking the resize handle the user can resize the FileExplorer through the UI. While resizing the dimension of the FileExplorer is automatically adjusted.

The resize behavior can be enabled through the “EnableResize” property.

In the view page, add FileExplorer element with resizable option as shown below.

HTML

<ej:FileExplorer
            ID="fileexplorer"
            runat="server"
            AjaxAction="DefaultFunctionalities.aspx/FileActionDefault"
            Path="~/FileBrowser/" 
            EnableResize="true">        
            <AjaxSettings>
                <Download Url="downloadFile.ashx{0}" />
                <Upload Url="uploadFiles.ashx{0}" />
            </AjaxSettings>       
        </ej:FileExplorer>

Responsiveness

By enabling the “IsResponsive” property, you can make the FileExplorer as responsive. While resizing the FileExplorer component, the inner content and toolbar items are automatically adjusted to equalize the size. The toolbar items are displayed within Dropdown on enabling the responsive. Otherwise it floated to the next line to equalize the space.

In the view page, add FileExplorer element with responsive option.

HTML

<%--It enables the resize functionality by adding resize handler at footer and enables the responsiveness of this control--%>
        <ej:FileExplorer
            ID="fileexplorer"
            runat="server"
            AjaxAction="DefaultFunctionalities.aspx/FileActionDefault"
            Path="~/FileBrowser/" 
            EnableResize="true" 
            IsResponsive="true">        
            <AjaxSettings>
                <Download Url="downloadFile.ashx{0}" />
                <Upload Url="uploadFiles.ashx{0}" />
            </AjaxSettings>       
        </ej:FileExplorer>

Restriction on Resize

You can restrict the dimension of the FileExplorer by setting the “MinHeight”, “MaxHeight”,  “MinWidth” and “MaxWidth” properties while resizing the FileExplorer.

In the view page, add FileExplorer element and set resize option within particular region.

HTML

<ej:FileExplorer
            ID="fileexplorer"
            runat="server"
            AjaxAction="DefaultFunctionalities.aspx/FileActionDefault"
            Path="~/FileBrowser/" 
            EnableResize="true" 
            IsResponsive="true" 
            MinHeight="200px" 
            MaxHeight="400px" 
            MinWidth="300px" 
            MaxWidth="1200px">        
            <AjaxSettings>
                <Download Url="downloadFile.ashx{0}" />
                <Upload Url="uploadFiles.ashx{0}" />
            </AjaxSettings>       
        </ej:FileExplorer>