Append element in gantt.$task_scale

[uglovec]

why can’t i add an element to this gantt.$task_scale.appendChild(scaleLine);

scaleLine is just a div that i created with createElement

here is my hook

const createLineWithClass = (id: string) => {
  const line = document.createElement('div');
  line.className = 'today-line';
  line.setAttribute('id', id);
  return line;
};

const clean = (ref: RefObject<Nullable<HTMLDivElement>>) => {
  if (ref.current?.parentNode) {
    ref.current.parentNode.removeChild(ref.current);
    ref.current = null;
  }
};

export const useFixedLine = (gantt: GanttStatic, fixedDate = new Date()) => {
  const lineRef = useRef<Nullable<HTMLDivElement>>(null);
  const lineRefScale = useRef<Nullable<HTMLDivElement>>(null);

  useEffect(() => {
    if (!gantt?.$task_data || !gantt?.$container || !gantt.$task_scale) return;

    const gridLine = createLineWithClass('gridLine');
    const scaleLine = createLineWithClass('scaleLine');

    lineRef.current = gridLine;
    lineRefScale.current = scaleLine;

    gantt.$task_data.appendChild(gridLine); // Work

    gantt.$task_scale.appendChild(scaleLine); //doesn't work

    const update = () => {
      if (!lineRef.current || !lineRefScale.current) return;

      const fixed = gantt.date.date_part(fixedDate);
      const left = gantt.posFromDate(fixed);
      const scrollLeft = gantt.$container.scrollLeft;

      lineRef.current.style.left = `${left - scrollLeft}px`;
      lineRef.current.style.top = `0`;
      lineRef.current.style.width = `2px`;
      lineRef.current.style.height = `${gantt.$task_bg.scrollHeight}px`;

      lineRefScale.current.style.left = `${left - scrollLeft}px`;
      lineRefScale.current.style.top = `0`;
      lineRefScale.current.style.width = `2px`;
      lineRefScale.current.style.height = `${gantt.config.scale_height}px`;
    };

    update();

    gantt.attachEvent('onGanttRender', update);

    return () => {
      clean(lineRef);
      clean(lineRefScale);
    };
  }, [gantt]);
};

i need this line

@ramil @Maksim_Lakatkou

[ramil]

Hello Molven,
When I try to run your code, I see that the node is successfully added to the DOM:

However, it is not recommended to modify the DOM elements inside the Gantt container. Next time Gantt repaints the data or the container, it removes the existing HTML elements and creates new ones. So, any changes you added will be lost.

If you want to create a vertical line in the timeline, you can use the marker extension:
https://docs.dhtmlx.com/gantt/desktop__markers.html

Or you can use the addTaskLayer method:
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html

To show a custom line in the scales, it is better to use the css function to return a custom class name and add the border styles:
https://docs.dhtmlx.com/gantt/desktop__configuring_time_scale.html#styling

Here is an example of how it can be implemented:
https://snippet.dhtmlx.com/zujxq2ww

If you want to return custom elements in the scale cells, you can do that in the format function:
https://docs.dhtmlx.com/gantt/desktop__configuring_time_scale.html#dateformat

Here is an example:

DHTMLX - Gantt. Marker text in the scales

[uglovec]

and if I have a double scale, that is, months on top, and days on the bottom, and it should be like on the screen

@ramil

[ramil]

Hello Molven,
It should be possible to implement that. You just need to add the styles for the selected scale cell so that it can overflow and be displayed over the scale cells above.
Here is an example of the implementation:
https://snippet.dhtmlx.com/7m88lvfv