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.

Customize tooltip in Gantt Charts

Thread ID:

Created:

Updated:

Platform:

Replies:

119966 Aug 19,2015 05:14 AM Aug 20,2015 07:48 AM JavaScript 1
loading
Tags: ejGantt
Gitesh
Asked On August 19, 2015 05:14 AM

Is it possible to customize the tooltip in gantt chart! If yes please tell me how to add own options in tooltip on gantt bar

Mahalakshmi Karthikeyan [Syncfusion]
Replied On August 20, 2015 07:48 AM

Hi Gitesh,

For your kind information we can customize the Gantt chart tooltip with the help of “taskbarTooltipTemplateId”. We can design our own style for the tooltip using JsRender script template by passing the script id to this property.  Please refer the below code snippet for details.

<head>

    <script>

        function _dateFormating(data) {

            return Globalize.format(this.data[data], "dddd , dd MMMM yyyy");

        }

        var helpers = {};

        helpers["_treeGridDateFormatter"] = _dateFormating;

        $.views.helpers(helpers);

    </script>

</head>


<body>


    <script type="text/x-jsrender" id="customTooltip">

        <div>

            <b>{{:taskName}}</b>

            <p>starts on <b>{{:~_treeGridDateFormatter("startDate")}}</b> and ends on <b>{{:~_treeGridDateFormatter("endDate")}}</b></p>

        </div>

    </script>

    <script type="text/javascript">

        $("#gantt").ejGantt({

            //…

            taskbarTooltipTemplateId: "customTooltip"

        });

    </script>

</body>

We have also prepared a sample based on this and you can find the sample under the following location.

Sample: http://jsplayground.syncfusion.com/ijlnlv3o

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.

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.

;