Resizing

12 Apr 20194 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.

JAVASCRIPT

$(function () {

            var fileSystemPath = "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/";

            var ajaxActionHandler = "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations";

            $("#fileExplorer").ejFileExplorer({

                path: fileSystemPath,

                ajaxAction: ajaxActionHandler,

                // it enables the resize functionality

                // and a resize handle added in the Footer element

                enableResize: true

            });

        });

NOTE

When resizing the File explorer control, the resize event is triggered. The resizeStart event is triggered while starting stage of resize and resizeStop event is triggered in the end of resize.

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.

NOTE

We can use adjustSize method to refresh the size of FileExplorer control.

JAVASCRIPT

$(function () {

            var fileSystemPath = "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/";

            var ajaxActionHandler = "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations";

            $("#fileExplorer").ejFileExplorer({

                path: fileSystemPath,

                ajaxAction: ajaxActionHandler,

                // it enables the resize functionality

                enableResize: true,

                // it enables the control responsiveness

                isResponsive: true

            });

        });

Restriction on Resize

You can restrict the dimension of the FileExplorer by setting the minHeight, maxHeight and minWidth,maxWidth properties while resizing the FileExplorer.

JAVASCRIPT

$(function () {

            var fileSystemPath = "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/";

            var ajaxActionHandler = "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations";

            $("#fileExplorer").ejFileExplorer({

                path: fileSystemPath,

                ajaxAction: ajaxActionHandler,

                enableResize: true,

                isResponsive: true,

                // restricts the dimensions for height and width

                minHeight: "200px",

                maxHeight: "400px",

                minWidth: "300px",

                maxWidth: "1200px"

            });

        });