Hi Cosimo,
Thanks for using Syncfusion product.
For your kind information, at present there is no support to customize the toolbar item with new buttons. Hence we have already logged a feature report regarding this. 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
But we can give work around to add custom Toolbar icon in TreeGrid using “Create” client side event. Please find the code snippet to achieve this.
|
<head id="Head1" runat="server">
//…
<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("ToolBar item clicked");
})
}
</script>
</form>
</body>
|
We have also prepared a sample based on this and you can find the sample under the following location.
Sample: http://www.syncfusion.com/downloads/support/forum/119855/ze/TreeGridCustomToolbar-266013254
Please let us know if you need further assistance on this.
Regards,
Mahalakshmi K.
