How to add custom button in toolbar

17 Feb 20223 minutes 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.

@{
    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 -->
        <ejs-filemanager id="file" toolbarClick="toolbarClick" toolbarCreate="onCreate">
            <e-filemanager-ajaxsettings url="/Home/FileOperations"
                                        downloadUrl="/Home/Download"
                                        uploadUrl="/Home/Upload"
                                        getImageUrl="/Home/GetImage">
            </e-filemanager-ajaxsettings>
            <e-filemanager-toolbarsettings items="items">
            </e-filemanager-toolbarsettings>
        </ejs-filemanager>
        <!-- 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.

FileManager getting started