Our state of the art Gantt chart


Post by rahulranjan »

Hi
i want to show one more field along with build in fields in tool-tip .
I tried but don't know where i am going wrong
eventTooltip: {
      id: "tool-tip-event",
      template: data =>
        `
      ${
        data.taskRecord.name
          ? `<div class="b-gantt-task-tooltip">Custom name: ${
              data.taskRecord.name
            }</div>`
          : ""
      }`
    },
Attachments
SendTool.png
SendTool.png (9.79 KiB) Viewed 2280 times

Post by mats »


Post by rahulranjan »

Hi
I have gone through the doc and implemented but it gives error.
 eventTooltip: {
      template: data => `
      ${
        data.taskRecord.actualStartDate
          ? `<div class="b-gantt-task-tooltip">Actual Start: ${
              data.taskRecord.actualStartDate
            }</div>`
          : ""
      }`
    },
error
Error: Id b-gantt-9-event-tip already in use
Error: Id b-gantt-9-event-tip already in use
    at Function.register (gantt.module.js:1133)
    at Tooltip.set id [as id] (gantt.module.js:13997)
    at Tooltip.get (gantt.module.js:2257)
    at Tooltip.set element (gantt.module.js:13882)
    at Tooltip.set element [as element] (gantt.module.js:17220)
    at Tooltip.get (gantt.module.js:2257)
    at Tooltip.startConfigure (gantt.module.js:13843)
    at Tooltip.startConfigure (gantt.module.js:16577)
    at Tooltip.startConfigure (gantt.module.js:17547)
    at Tooltip.setConfig (gantt.module.js:2027)
    at resolvePromise (zone.js:831)

Post by mats »

Please provide a test case

Post by rahulranjan »

Steps to reproduce
1. Add eventTooltip feature to gantt feature in angular example
Start giving error - In ganttConfig.ts
Attachments
advanced.rar
(1.79 MiB) Downloaded 126 times

Post by pmiklashevich »

eventTooltip is Scheduler feature. You're using Gantt. Please replace "eventTooltip" with "taskTooltip"
  features: {
    filter: true,
    nonWorkingTime: true,
    taskTooltip: {
      template: data => `
            ${
        data.taskRecord.name
          ? `<div class="b-gantt-task-tooltip">Actual Name: ${
            data.taskRecord.name
            }</div>`
          : ""
        }`
    },

Pavlo Miklashevych
Sr. Frontend Developer


Post by rahulranjan »

Hi
Thanks this works fine but it removes the pre-configured tool tip . I wanted to add a new field in tool tip with pre-defined one

Post by Animal »

Try this:
            template : data => {
                // Return the result of the feature's default template, with custom markup appended
                return TaskTooltip.defaultConfig.template.call(this, data) +
                `<p>${
                    data.taskRecord.actualStartDate ?
                        `<div class="b-gantt-task-tooltip">Actual Start: ${data.taskRecord.actualStartDate}</div>` : ''
                }`;
            }

Post by rahulranjan »

Hi
Thanks
I tried this
but its giving error
ERROR TypeError: Cannot read property 'call' of undefined
    at TaskTooltip.template (ganttConfig.js:53)
    at TaskTooltip.getTipHtml (gantt.module.js:79597)
    at Tooltip.alignTo (gantt.module.js:19346)
    at Tooltip.showBy (gantt.module.js:15365)
    at Tooltip.showByTarget (gantt.module.js:19159)
    at Tooltip.delayShow (gantt.module.js:19127)
    at Tooltip.handleForElementOver (gantt.module.js:19110)
    at Tooltip.internalOnPointerOver (gantt.module.js:19047)
    at HTMLDivElement.handler (gantt.module.js:10604)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

Post by pmiklashevich »

Hello @rahulranjan,

We will add a demo to show how to customize task tooltip: https://app.assembla.com/spaces/bryntum/tickets/9109-create-tooltips-demo/details

What @Animal said was a proof of concept. `this` doesn't work because of arrow function which works in outer scope. Please use normal function like:
    features : {
        taskTooltip : {
            template(data) {
Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply