How to enable/disable toolbar item/items

17 Feb 20223 minutes to read

The toolbar items can be enabled/disabled by specifying the items in enableToolbarItems or disableToolbarItems methods respectively.

The following example shows enabling and disabling toolbar items on button click.

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

@{
    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>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

Output be like the below when enable toolbar item.

FileManager enable toolbar items

Output be like the below when enable toolbar item.

FileManager disable toolbar items