How to add custom icon To Toolbar?
In ASP.NET Web Gantt, we can customize the toolbar with custom icons and can bind click event to the icon using the toolbarSettings.customToolbarItems property. We can define the required custom toolbar items in this property and handle the click events using toolbarClick client side event.
There are two ways to define custom toolbar items in Gantt,
By using CSS text:
We need to define the required custom toolbar item in the customToolbarItems.text property. And by using this text value, we can bind the event for the custom icon in toolbarClick event. Find the below code example for details.
<style type="text/css" class="cssStyles">
.Reset:before {
content: "\e677";
}
</style>
$("#GanttContainer").ejGantt({
//...
toolbarSettings: {
showToolbar: true,
customToolbarItems: [{
text: "Reset",
tooltipText: "Reset"
}],
},
toolbarClick: function (args) {
if (args.itemName == "Reset") {
// actions to be taken while clicking custom toolbar item
}
},
})
By using template:
We can also customize the toolbar items by providing the JsRender template to the templateID property. Find the below code example for details.
<script id="ColumnVisibility" type="text/x-jsrender">
<input id="dropdownContainer" />
</script>
$("#GanttContainer").ejGantt({
//...
toolbarSettings: {
showToolbar: true,
customToolbarItems: [{
templateID: "#ColumnVisibility",
tooltipText: "Column Visibility"],
},
create: function(args) {
$("#dropdownContainer").ejDropDownList({
height: 30,
dataSource: dropData,
showCheckbox: true,
field: {
text: "text",
value: "value",
selected: "selected"
},
checkChange: function(args) {
var ganttObj = $("#GanttContainer").data("ejGantt");
if (args.isChecked == false) {
ganttObj.hideColumn(args.selectedText);
} else {
ganttObj.showColumn(args.selectedText);
}
}
});
}
})
You can find a sample to show custom toolbar items in Gantt below,
