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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Toolbar

Thread ID:

Created:

Updated:

Platform:

Replies:

119855 Aug 7,2015 05:45 AM UTC Aug 8,2015 11:43 AM UTC ASP.NET Web Forms 1
loading
Tags: TreeGrid
Cosimo Carbonelli
Asked On August 7, 2015 05:45 AM UTC

Is it possible to customize the treegrid toolbar by adding custom buttons? I cannot find documentation, can you explain me how to do it?
Thank you.
Best regards.

Mahalakshmi Karthikeyan [Syncfusion]
Replied On August 8, 2015 11:43 AM UTC

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.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;