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.
Unfortunately, activation email could not send to your email. Please try again.

Custom item in toolbar

Thread ID:

Created:

Updated:

Platform:

Replies:

121680 Jan 15,2016 10:21 AM Jan 19,2016 05:06 AM ASP.NET Web Forms 3
loading
Tags: TreeGrid
Jorge Pampin
Asked On January 15, 2016 10:21 AM

Hello,

How to set icon to toolbar custom items?

Thanks!

Jayakumar Duraisamy [Syncfusion]
Replied On January 18, 2016 11:05 AM

Hi Jorge,

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>



We have also prepared a sample for your reference. Please find the sample in the following URL.

Sample: http://www.syncfusion.com/downloads/support/forum/121680/ze/GanttSample_Asp.net-859087299
Please let us know if you require further assistance on this.

Regards,

 Jayakumar Duraisamy

Jorge Pampin
Replied On January 18, 2016 12:07 PM

Sorry, the question is about TreeGrid control, no Gannt control.

Thanks!

Jayakumar Duraisamy [Syncfusion]
Replied On January 19, 2016 05:06 AM

Hi Jorge,

We sorry for the inconvenience caused. Please ignore previous update.


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>




We have also prepared a sample for your reference. Please find the sample in the following URL.

Sample: http://www.syncfusion.com/downloads/support/forum/121680/ze/TreeGridSample_ASP.net-351440070
Please let us know if you require further assistance on this.

Regards

Jayakumar Duraisamy

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.

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.

;