A newer version of this page is available. Switch to the current version.

Toolbar

  • 3 minutes to read

ASPxFileManager_VE_Toolbar

The ASPxFileManager toolbar can display the following elements.

Default Toolbar Items

ASPxFileManager provides the following default toolbar items.

FileManager_ToolbarItems

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.

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.

FileManager_CustomButtons

<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>
protected void ASPxFileManager_CustomCallback(object source, CallbackEventArgsBase e) {
     CurrentView = (FileListView)Enum.Parse(typeof(FileListView), e.Parameter.ToString());
}
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

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

See Also