Toolbar

• Aug 01, 2019
• 3 minutes to read

The ASPxFileManager toolbar can display the following elements.

• Path Box

  The path box displays the path to the current folder. You can use the FileManagerSettings.UseAppRelativePath property to specify whether the path is relative to the root folder (FileManagerSettings.RootFolder) or application. The path box can be hidden by setting the FileManagerSettingsToolbar.ShowPath property to false.

• Filter Box

  The filter box allows end-users to specify a filter condition for items within a file container. The text, meeting the filtering condition, is highlighted. You can specify the time interval between the time an end-user starts typing in the filter box and filtering is applied by using the FileManagerSettings.FilterDelay property. The filter box visibility is controlled by the FileManagerSettingsToolbar.ShowFilterBox property.

• Items

  Toolbar items allow end-users to perform specific actions. The toolbar can display default and custom toolbar items that are contained in the FileManagerSettingsToolbar.Items collection. If the collection is empty, the toolbar is populated with default items, whose corresponding actions are allowed (see the table below), except the upload button.

Default Toolbar Items

ASPxFileManager provides the following default toolbar items.

The table below lists the default toolbar items, properties that allow the corresponding actions, and events that fire when the corresponding action on the items is performed.

Button Name	Allow Action Property	Client-Side Events	Server-Side Events
Create Button	FileManagerSettingsEditing.AllowCreate	ASPxClientFileManager.FolderCreating, ASPxClientFileManager.FolderCreated	ASPxFileManager.FolderCreating
Copy Button	FileManagerSettingsEditing.AllowCopy	ASPxClientFileManager.ItemCopying, ASPxClientFileManager.ItemCopied	ASPxFileManager.ItemCopying
Delete Button	FileManagerSettingsEditing.AllowDelete	ASPxClientFileManager.ItemDeleting, ASPxClientFileManager.ItemDeleted	ASPxFileManager.ItemDeleting
Download Button	FileManagerSettingsEditing.AllowDownload	ASPxClientFileManager.FileDownloading	ASPxFileManager.FileDownloading
Move Button	FileManagerSettingsEditing.AllowMove	ASPxClientFileManager.ItemMoving, ASPxClientFileManager.ItemMoved	ASPxFileManager.ItemMoving
Rename Button	FileManagerSettingsEditing.AllowRename	ASPxClientFileManager.ItemRenaming, ASPxClientFileManager.ItemRenamed	ASPxFileManager.ItemRenaming
Refresh Button	-	-	-
Upload Button	FileManagerSettingsUpload.Enabled	ASPxClientFileManager.FileUploading, ASPxClientFileManager.FileUploaded	ASPxFileManager.FileUploading

Custom Toolbar Items

In addition to default toolbar items, ASPxFileManager provides the capability to display custom items of the following types.

• FileManagerToolbarCustomButton
• FileManagerToolbarCustomDropDownButton

When a custom item is clicked, the ASPxClientFileManager.CustomCommand event is raised allowing you to perform custom actions. You can use the event argument’s ASPxClientFileManagerCustomCommandEventArgs.commandName parameter to identify a clicked button by its command name (FileManagerToolbarCustomButton.CommandName).

Example

The code sample below demonstrates how to implement two custom toolbar buttons. The complete sample is available in the DevExpress online demo File Manager - Custom Toolbar.

ASPX

<dx:ASPxFileManager ID="FileManager" ClientInstanceName="FileManager" runat="server" OnCustomCallback="ASPxFileManager_CustomCallback">
     <ClientSideEvents CustomCommand="OnCustomCommand"/>
     <SettingsToolbar>
          <Items>
               <dx:FileManagerToolbarCustomButton Text="Thumbnails View" CommandName="ChangeView-Thumbnails" GroupName="ViewMode">
                    <Image IconID="grid_cards_16x16" />
               </dx:FileManagerToolbarCustomButton>
               <dx:FileManagerToolbarCustomButton Text="Details View" CommandName="ChangeView-Details" GroupName="ViewMode">
                    <Image IconID="grid_grid_16x16" />
               </dx:FileManagerToolbarCustomButton>
          </Items>
     </SettingsToolbar>
</dx:ASPxFileManager>

C#

protected void ASPxFileManager_CustomCallback(object source, CallbackEventArgsBase e) {
     CurrentView = (FileListView)Enum.Parse(typeof(FileListView), e.Parameter.ToString());
}

JS

function OnCustomCommand(s, e) {
     switch(e.commandName) {
          case "ChangeView-Thumbnails":
               FileManager.PerformCallback("Thumbnails");
               break;
          case "ChangeView-Details":
               FileManager.PerformCallback("Details");
               break;
     }
}

When a toolbar is about to be updated, e.g., when an active area is changed, the ASPxClientFileManager.ToolbarUpdating event is raised. The event allows you to change toolbar item availability. You can determine the currently active area using the event argument’s ASPxClientFileManagerToolbarUpdatingEventArgs.activeAreaName property. To access a particular toolbar item, use the ASPxClientFileManager.GetToolbarItemByCommandName method.

Example

The complete sample is available in the DevExpress online demo File Manager - Custom Toolbar

ASPX

<dx:ASPxFileManager ID="FileManager" ClientInstanceName="FileManager" runat="server">
     <ClientSideEvents ToolbarUpdating="OnToolbarUpdating" />
     <SettingsToolbar>
          <Items>
               <dx:FileManagerToolbarCustomButton CommandName="Properties">
                    <Image IconID="setup_properties_16x16" />
               </dx:FileManagerToolbarCustomButton>
...

JS

function OnToolbarUpdating(s, e) {
     var enabled = (e.activeAreaName == "Folders" || FileManager.GetSelectedItems().length > 0) && e.activeAreaName != "None";
     FileManager.GetToolbarItemByCommandName("Properties").SetEnabled(enabled);
}

To learn how to customize toolbar element appearance, see the Visual Element - Toolbar topic.