We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Solution:
Currently there is no support to customize the toolbar in Gantt. Hence we have logged a feature request regarding this requirement. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.
https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents
And also for your information, we can give work around solution for this requirement temporarily. Please refer the below code snippet to get the customized toolbar item at load time.
|
<head> <style> #customicon { background-image: url("../folder-open.png"); position: absolute; background-repeat: no-repeat; height: 20px; width: 30px; } </style> </head> <body>
<form id="form1" runat="server" onsubmit="return false" style="overflow: hidden; padding:0; margin: 0;height:100%;width:100%;"> <ej:Gantt ID="Gantt" runat="server" //… Create="create" </ej:Gantt> <script type="text/javascript"> function create(args) { var toolbar = $("#Gantt_toolbarItems");
//Toolbar item to be added var toolbarItem = "<li tabindex= " + "0" + " title=" + "File Explorer" + " class=" + "e-tooltxt " + " id=" + "Gantt_customicon " + " style=width:30px;height:24px;" + "><span id=customicon" + "></span></li>";
//appending the new item to the existing toolbar $($(toolbar).children()).append(toolbarItem);
$("#Gantt_customicon").click(function () { alert("custom toolbar icon has been clicked"); }) } </script> </body> |
Solution:
At present there is no support to customize the toolbar in TreeGrid. Hence we have logged a feature request regarding this requirement. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.
https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents
And also for your information, we can give work around solution for this requirement temporarily. Please refer the below code snippet to get the customized toolbar item at load time.
|
<head> <style> #customicon { background-image: url("../folder-open.png"); position: absolute; background-repeat: no-repeat; height: 20px; width: 30px; } </style> </head> <body>
<form id="form1" runat="server" onsubmit="return false" style="overflow: hidden; padding:0; margin: 0;height:100%;width:100%;"> <ej:treegrid ID="Treegrid" runat="server" //… Create="create" </ej:treegrid> <script type="text/javascript"> function create(args) { var toolbar = $("#Treegrid_toolbarItems");
//Toolbar item to be added var toolbarItem = "<li tabindex= " + "0" + " title=" + "File Explorer" + " class=" + "e-tooltxt " + " id=" + "Treegrid_customicon " + " style=width:30px;height:24px;" + "><span id=customicon" + "></span></li>";
//appending the new item to the existing toolbar $($(toolbar).children()).append(toolbarItem);
$("#Treegrid_customicon").click(function () { alert("custom toolbar icon has been clicked"); }) } }) } </script> </body> |
