Our state of the art Gantt chart


Post by additout »

Good morning,

I am trying to add a custom label inside the task tooltip, something like this:

image.png
image.png (10.46 KiB) Viewed 429 times

I've tried to check both documentation and forum:

viewtopic.php?f=52&t=16485
https://bryntum.com/examples/gantt/tooltips/
https://bryntum.com/docs/gantt/api/Core/widget/Tooltip

But none of this information is working fine for me, can you please provide me an example?

Regards,

Joan


Post by tasnim »

I added a custom label here https://bryntum.com/examples/gantt/tooltips/
Here is how you can add it too

features : {
        taskTooltip : {
            template(data) {
                const
                    me             = this,
                    { taskRecord } = data;

            // Return the result of the feature's default template, with custom markup appended
            return TaskTooltip.defaultConfig.template.call(me, data) +
                `<table border="0" cellspacing="0" cellpadding="0">
                    <tr><td>${me.L('Scheduling Mode')}:</td><td>${taskRecord.schedulingMode}</td></tr>
                    <tr><td>${me.L('Calendar')}:</td><td>${taskRecord.effectiveCalendar.name}</td></tr>
                    <tr><td>${me.L('Critical')}:</td><td>${taskRecord.critical ? me.L('Yes') : me.L('No')}</td></tr>
                    <tr><td>Hora:</td><td>3</td></tr>
                </table>`;
        }
    },

Please check docs
https://www.bryntum.com/docs/gantt/api/Gantt/feature/TaskTooltip

Attachments
Screenshot 2022-09-30 174449.png
Screenshot 2022-09-30 174449.png (36.88 KiB) Viewed 423 times

Post by additout »

Good morning!

Thank you for your quick answer, but that's not the case I was looking for. I just want to add a label either near complete or %. For example:

Imagine this is the tooltip:

Start: Jan 20, 2019
End: Jan 28, 2018
Duration: 3 days
Complete (Hours): 50%

OR

Start: Jan 20, 2019
End: Jan 28, 2018
Duration: 3 days
Complete: 50% Hours

This is because we show to the client the % status in worked hours or operation number, in case you needed a reason :D.

Thank you again,

Joan


Post by tasnim »

Hi Joan,
To achieve that you need to use this code snippet

taskTooltip : {
            template(data) {
                const
                    me             = this,
                    { taskRecord } = data;

            // Return the result of the feature's default template, with custom markup appended
            return TaskTooltip.defaultConfig.template.call(me, data) +
                `<table border="0" cellspacing="0" cellpadding="0">
                    <tr><td>${me.L('L{Complete}')} (Hours):</td><td class="b-right">${taskRecord.renderedPercentDone}%</td></tr>
                </table>`;
        }
    }
Attachments
Screenshot 2022-10-03 160234.png
Screenshot 2022-10-03 160234.png (27.25 KiB) Viewed 410 times

Post by additout »

Morning! :)

Thank you again, I tried to add this piece of code inside my Gantt Config features:

Captura de Pantalla 2022-10-04 a las 9.18.59.png
Captura de Pantalla 2022-10-04 a las 9.18.59.png (73.98 KiB) Viewed 398 times

But I am getting this error:

Captura de Pantalla 2022-10-04 a las 9.19.05.png
Captura de Pantalla 2022-10-04 a las 9.19.05.png (176.94 KiB) Viewed 398 times

Any idea why I get this?

Thank you in advance!


Post by tasnim »

You need to import TaskTooltip

import { TaskTooltip } from '@bryntum/gantt';

Post by additout »

Morning Tasnim,

So here's the thing, we have our project in NextJS, so to import components from /bryntum/gantt is giving us some server side problem. (Tried to import TaskTooltip and it gives us an export error, the same we had importing other Bryntum components)

To solve that we do this:

Captura de Pantalla 2022-10-04 a las 10.06.35.png
Captura de Pantalla 2022-10-04 a las 10.06.35.png (75.57 KiB) Viewed 396 times

Followed by this to import:

Captura de Pantalla 2022-10-04 a las 10.03.09.png
Captura de Pantalla 2022-10-04 a las 10.03.09.png (16.25 KiB) Viewed 396 times

With the other components it works, I think because they are "Reactlike" and they come from the BryntumGantt library. This one instead, comes from /bryntum/gantt and following the same solution as the other it gives this error:

Captura de Pantalla 2022-10-04 a las 9.57.41.png
Captura de Pantalla 2022-10-04 a las 9.57.41.png (73.51 KiB) Viewed 396 times

Hope we can find a solution to this,

Regards,

Joan


Post by tasnim »

Could you please provide us a runnable test case so we can debug it?


Post by additout »

Sorry for the delay, here's the runneable test link:

https://drive.google.com/file/d/1oyqYS4Wn9ZATOMopBUXpEohkRx5bpqpE/view?usp=sharing

Instructions:

npm i
npm run dev

You should be able to see the Gantt. You have to unccoment the lines that are on GanttConfig and that's it.

You'll see the "Export" error. I tried to fix that one with no success with the answer above.

Thank you for your patience!


Post by marcio »

Hey additout,

Sorry for the late reply, we've been trying to investigate and provide a clean solution for your case, but unfortunately no good news.

Currently, we don't provide support for TaskTooltip to work as a component (still in development), and to work with NextJS and SSR, we would need that wrapper component to make the methods available to work as you want in the code that you shared.

A workaround that we suggest, for now, is to replicate all the HTML structures from the default tooltip and add the piece that you're trying to add in the example that you provided.

Best regards,
Márcio


Post Reply