Resizing

12 Jun 20232 minutes to read

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

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

In the view page, add FileExplorer helper with resizable option as shown in the following:

CSHTML

<ej-file-explorer id="file" path="wwwroot/images/FileExplorer" ajax-action="@Url.Content("FileActionDefault")" enable-resize="true">
    <e-file-ajax-settings>
        <e-download url="/FileExplorer/Download{0}"></e-download>
        <e-get-image url="/FileExplorer/GetImage{0}"></e-get-image>
        <e-upload url="/FileExplorer/Upload{0}"></e-upload>
    </e-file-ajax-settings>
</ej-file-explorer>

Responsiveness

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

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

CSHTML

<ej-file-explorer id="file" path="wwwroot/images/FileExplorer" ajax-action="@Url.Content("FileActionDefault")" is-responsive="true" enable-resize="true">
    <e-file-ajax-settings>
        <e-download url="/FileExplorer/Download{0}"></e-download>
        <e-get-image url="/FileExplorer/GetImage{0}"></e-get-image>
        <e-upload url="/FileExplorer/Upload{0}"></e-upload>
    </e-file-ajax-settings>
</ej-file-explorer>

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 helper and set resize option within the particular region.

CSHTML

<ej-file-explorer id="file" path="wwwroot/images/FileExplorer" ajax-action="@Url.Content("FileActionDefault")" min-height="200px" max-height="400px" min-width="300px" max-width="1200px" is-responsive="true" enable-resize="true">
    <e-file-ajax-settings>
        <e-download url="/FileExplorer/Download{0}"></e-download>
        <e-get-image url="/FileExplorer/GetImage{0}"></e-get-image>
        <e-upload url="/FileExplorer/Upload{0}"></e-upload>
    </e-file-ajax-settings>
</ej-file-explorer>