Search results

How to add custom button in toolbar

22 Jul 2021 / 1 minute to read

The toolbar items can be customized using the toolbarSettings API and toolbarClick event.

The following example shows adding a custom item in the toolbar.

The new toolbar button is added using toolbarSettings. The toolbarClick event is used to add an event handler to the new toolbar button.

razor
Copied to clipboard
@{
    string[] items = new string[] { "NewFolder", "Upload", "Delete", "Download", "Rename", "SortBy", "Refresh", "Selection", "View", "Details", "Custom" };
}
<div class="control-section">
    <div class="sample-container">
        <!--  Filemanager element declaration -->
        @Html.EJS().FileManager("file").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings()
        {
            Url = "/Home/FileOperations",
            GetImageUrl = "/Home/GetImage",
            UploadUrl = "/Home/Upload",
            DownloadUrl = "/Home/Download"
        }).ToolbarSettings(new Syncfusion.EJ2.FileManager.FileManagerToolbarSettings()
        {
            Items = items
        }).ToolbarClick("toolbarClick").ToolbarCreate("onCreate").Render()
        <!-- end of filemanager element -->
    </div>
</div>
<script>
    // event for custom toolbar item
    function toolbarClick(args) {
        if (args.item.text === 'Custom') {
            alert('You have clicked custom toolbar item')
        }
    }
    function onCreate(args) {
        for (var i = 0; i < args.items.length; i++) {
            if (args.items[i].id === this.element.id + '_tb_custom') {
                args.items[i].prefixIcon = 'e-icons e-fe-tick';
            }
        }
    }
</script>
<style>
    .e-fe-tick::before {
        content: '\e614';
    }
</style>

Output be like the below.

FileManager getting started