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>
Output be like the below.