Adding Custom Item to Toolbar in Blazor FileManager Component

29 Nov 20221 minute to read

The custom toolbar items can be added and customized using the ToolbarSettings API and ToolbarCreated events.

The new toolbar button ‘Custom’ is added using the ToolbarSettings property. The prefix icon and tooltip are added to the newly added toolbar button using the ToolbarCreated event.

@using Syncfusion.Blazor.FileManager

    <SfFileManager TValue="FileManagerDirectoryContent">
        <FileManagerAjaxSettings Url="/api/SampleData/FileOperations"
                                 UploadUrl="/api/SampleData/Upload"
                                 DownloadUrl="/api/SampleData/Download"
                                 GetImageUrl="/api/SampleData/GetImage">
        </FileManagerAjaxSettings>
        <FileManagerToolbarSettings Items="@Items"></FileManagerToolbarSettings>
    </SfFileManager>

@code {
    public string[] Items =  new string[] {"NewFolder", "Upload", "Custom", "Delete", "Download", "Rename", "SortBy", "Refresh", "Selection", "View", "Details"};

    public void toolbarCreate( ToolbarCreateEventArgs args) {
        args.Items.Add(new ToolBarItemModel()
            {
                Text = "Custom",
                PrefixIcon = "e-icons e-fe-tick",
                TooltipText = "Test Tooltip"
            });
    }
}

Run the application

After successful compilation of your application, simply press F5 to run the application.

Blazor FileManger displays Custom Item in Toolbar