Custom tooltip with custom task properties

[oscar bartolome]

Hi,

I'm trying to add some new properties to the tasks and show them in a custom tooltip. For example:

var data = [

        {

            taskID: 1,

            taskName: "PO1",

            startDate: "02/10/2014",

            duration: 6,

            Resources: [1, 2],

            durationUnit: "hour",

            material: "1.4301",

            thickness: "1mm",

          ...

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

    <table>

        <tr>

            <td style="padding:3px"><b>Material:</b></td>

            <td style="padding:3px">{{:#data['material']}}</td>

        </tr>

        <tr>

            <td style="padding:3px"><b>Thickness:</b></td>

            <td style="padding:3px">{{:#data['thickness']}}</td>

        </tr>

    </table>

</script>

But this fields are empty in the tooltip. Any way to do this??

Thanks.

[oscar bartolome]

I have got it now by adding the new properties as columns in the load event. Is it mandatory to add them as columns?

But the main issue is that this is working well in project view gantt task tooltips, but not in the resources view ones. Any way to solve this?

Thanks.

[Punniyamoorthi Elangovan]

Hi Oscar, 

Thank you for contacting Syncfusion support 

Please find the below updates 

Query: I have got it now by adding the new properties as columns in the load event. Is it mandatory to add them as columns? 

Answer: We can show the properties as taskbar tooltip text  without adding the properties as columns in the load client side event. Please refer the below code snippet. 

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

        <table> 

            <tr> 

                <td style="padding:3px"><b>Material:</b></td> 

                <td style="padding:3px">{{:#data.item['material']}}</td> 

            </tr> 

            <tr> 

                <td style="padding:3px"><b>Thickness:</b></td> 

                <td style="padding:3px">{{:#data.item['thickness']}}</td> 

            </tr> 

        </table> 

    </script> 

We have prepared the JS playground sample with your requirement, please find the sample link below 

https://jsplayground.syncfusion.com/neblfsqz 

Query2: But the main issue is that this is working well in project view gantt task tooltips, but not in the resources view ones. 

Answer: Can you please refer the above solution to overcome the issue in Resourceview Gantt. 

Please let us know if you require further assistance on this. 

Regards, 

Punniyamoorthi 

[oscar bartolome]

Ok, it works really fine now. Thanks!

[Punniyamoorthi Elangovan]

Hi Oscar,  

Thank you for your update 

Please let us know, if you require any further assistance on this. 

Regards, 

Punniyamoorthi