Search results

How to add custom button in toolbar

29 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.

tagHelper
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 -->
        <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>

Output be like the below.

FileManager getting started