Customization

12 Jun 20235 minutes to read

Dimension Customization

The dimension of the file explorer can be customized through the “Height” and “Width” property. The dimension can be set in percentage (e.g., width: “100 %”), so that the control inherits the width from the parent element.

In the view page, add file explorer with custom height and width.

CSHTML

<ej-file-explorer id="custom" path="wwwroot/images/FileExplorer" ajax-action="@Url.Content("FileActionDefault")" height="300px" width="900px">
    <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>

Customizing the Navigation pane

The navigation pane contains the tree view element that displays all the folders from the filesystem in a hierarchical manner. This is useful for a quick navigation of any folder in the filesystem.

The visibility of the navigation pane can be controlled by the “ShowNavigationPane” property. By disabling this property, you can hide the navigation pane from file explorer.

In the view page, add file explorer and specify the navigation pane as false.

CSHTML

<ej-file-explorer id="custom" path="wwwroot/images/FileExplorer" ajax-action="@Url.Content("FileActionDefault")"show-navigation-pane="false">
    <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>

Customizing the Content pane

The content pane is the main part of the file explorer UI that displays all the files and folders from the filesystem. The content pane supports the following types of layout views:

• Grid
• Tile
• Large Icons

The grid view displays the files and folders in a grid layout with the details in separate columns. By default, the grid view has four columns that displays the file name, type, date modified, and size of the file. For more details about grid view customization, refer here.

The tile view display the files and folders like a small sized icons in the left side and file details in the right. It allows the thumbnails for the image files so that you can view the tiny preview of all image files.

The large icons view display the files and folders like a large sized icons with name. It allows the thumbnails for the image files so that you can view the tiny preview of all image files.

Changing the Layout views
You can change the layout of current view by the switcher that is displayed in the right-bottom of footer in the file explorer. By clicking the grid and large icons view buttons you can change the layout of current view.

You can change the layout using the toolbar option. While clicking this tool, popup opens with different layout types. Here you can choose any options.

Also the layout views can be changed through the “Layout” property. The layoutChange event will be triggered whenever the layout view type is changed.

Customizing the Grid view

By default, sorting is enabled in grid view of file explorer, it helps you to sort each columns in ascending or descending order by pressing the corresponding column header. The sorting functionality can be disabled by setting the “AllowSorting” property to false.

The behavior of the columns can be customized through the “Columns” property.

In the view page, add file explorer with custom grid settings.

CSHTML

<ej-file-explorer id="custom" path="wwwroot/images/FileExplorer" ajax-action="@Url.Content("FileActionDefault")">
    <e-file-grid-settings>
        <e-file-columns>
          <e-column-field header-text="Name" field="name" width="150"></e-column-field>    
          <e-column-field header-text="DateModified" field="dateModified" width="150"></e-column-field>
          <e-column-field header-text="size" field="size" width="90" text-align="Right"></e-column-field>
        </e-file-columns>
    </e-file-grid-settings>
    <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>

Footer Customization

The footer displays the details of the currently selected files and folders, and it contains the switcher to change the layout view. The visibility of the footer can be customized by the “ShowFooter” property.

In the view page, add file explorer helper and hides the footer as shown in the following.

CSHTML

<ej-file-explorer id="custom" path="wwwroot/images/FileExplorer" ajax-action="@Url.Content("FileActionDefault")" show-footer="false">
    <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>

Customize the Root Folder name in FileExplorer

You can set the alias name to the root folder of FileExplorer by using rootFolderName API. It is used to replace the actual root folder name in the FileExplorer UI. Refer to the below code to set the alias name for the root folder of FileExplorer.

CSHTML

<ej-file-explorer id="root" path="wwwroot/images/FileExplorer" ajax-action="@Url.Content("FileActionDefault")" root-folder-name="This PC">
    <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>