[REACT] Export/Print plugin got Gantt Chart not working (no tasks, no CSS)

[vgi]

Hello,

We're trying to implement the 'Gnt.plugin.Printable' plugin in one of our pages making use of the Bryntum Gantt. When triggering the gantt.print() the print preview on the browser looks totally fine, but the preview on the print modal seems to ignore both the tasks and the CSS (See attached screenshot).

Any idea why this is happening?

Thanks for your help.

[vgi]

The first issue (no tasks) was solved by removing a custom CSS file we were loading. We're still trying to fix the second issue (no CSS). Please see the below screenshot.

[Maxim Gorkovsky]

Hello.
Could you provide runnable test case?

[hieu]

hi team !
i use print function

 const handlePrintPdf = React.useCallback(async () => {
    await gantt?.current?.instance?.features?.print?.showPrintDialog();
  }, []);

A modal print appears, but when the print button is pressed, there is a warning saying Failed to load stylesheets.
Maybe I missed a step, please let me know what I need to do, thank you.

[alex.l]

Hi,

We need more context here, please share your feature configuration as well. Did you ran it on localhost? Will this post help you to understand the case? https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property

[hieu]

hi,Thanks for replying
I ran it locally,
My feature configuration

features: {
      dependencies: {
        tooltip: {
          getHtml: (record: any) => {
            const idFromTask =
              record?.activeTarget?.elementData?.dependency?._data?.fromTask;
            const idToTask =
              record?.activeTarget?.elementData?.dependency?._data?.toTask;
            const findDependencies = find(dependenciesData, {
              fromTask: idFromTask,
              toTask: idToTask,
            });
            const nestedItems = flatMap(jobSchedules, "items");
            const findItemFromTask = find(nestedItems, {
              _id: idFromTask,
            });
            const findItemToTask = find(nestedItems, {
              _id: idToTask,
            });

        if (findDependencies) {
          return `<div>
                    <div class="dependencies">
                      <span class="dependencies-from">${t(
                        "common.from"
                      )}:</span>
                      <span>${findItemFromTask.name}</span>
                    </div>
                    <div class="dependencies">
                      <span class="dependencies-to">${t(
                        "common.to"
                      )}:</span>
                      <span>${findItemToTask.name}</span>
                    </div>
                  </div>`;
        }
      },
    },
    allowCreate: isEnabledEdit,
  },
  dependencyEdit: isEnabledEdit,
  taskDrag: {
    disabled: !isEnabledEdit,
    pinSuccessors: true,
  },
  taskMenu: {
    processItems: ({ items, taskRecord }: any) => {
      if (isEnabledEdit) {
        const isParent = taskRecord?._data?.children;
        items.add.menu.milestone = false;
        if (!!isParent) {
          items.add.menu.subtask.onItem = ({ taskRecord }: any) => {
            onOpentModalCreateTask(taskRecord);
          };
          items.linkTasks = false;
          items.unlinkTasks = false;
        } else {
          items.add.menu.subtask = {
            ...items.add.menu.subtask,
            disabled: true,
          };
          items.indent = false;
          items.outdent = false;
        }
      } else {
        return false;
      }
    },
  },
  labels: {
    left: {
      renderer: ({ taskRecord }: any) =>
        `<div class="label-timeline">${taskRecord?._data?.name}</div>`,
    },
  },
  timeRanges: {
    showCurrentTimeLine: true,
  },
  taskNonWorkingTime: true,
  taskResize: {
    disabled: !isEnabledEdit,
  },
  rowReorder: {
    disabled: !isEnabledEdit,
  },
  pan: true,
  print: true,
},

[alex.l]

Hi,

Looks like you have outdated version. Please make sure you used latest version

[hieu]

hi
I am using the latest version "@bryntum/gantt-react": "⁵.6.0",

[alex.l]

Please upgrade to 5.6.1 and try to reproduce the problem. Here is a ticket that we think fixed the problem you mentioned https://github.com/bryntum/support/issues/7752 . It released in 5.6.1

[hieu]

Thanks, it worked, but it seems to be losing the css and not having the task color