High-Performance UI Component Library for Enterprise Applications Forums Gantt How can I make the Smart Gantt responsive in JavaScript?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #113624
    alex.morris22
    Participant

    Hi everyone, I am working on an internal admin dashboard with Gantt. I am currently trying to solve this: How can I make the Smart Gantt responsive in JavaScript? So far, I already checked the docs and basic examples, but performance drops once the dataset grows. What would be the cleanest way to implement this?

    #113632
    admin
    Keymaster

    Hi Alex,

    For Smart.Gantt, the cleanest approach is to make responsiveness part of the layout strategy rather than trying to resize the component manually on every window event.

    A recommended pattern is:

    1. Put Smart.Gantt inside a responsive container
    – Use a parent element with flexible sizing (width: 100%, controlled height, flex/grid layout).
    – Let the component calculate its available space from the container.

    2. Handle resize events through a ResizeObserver
    – Prefer observing the Gantt container instead of listening directly to window.resize.
    – This also handles side panels, dashboard layout changes, and dynamic navigation areas.

    Example:

    const container = document.querySelector('#ganttContainer');
    const gantt = document.querySelector('smart-gantt');
    
    const resizeObserver = new ResizeObserver(() => {
        gantt.refresh();
    });

    resizeObserver.observe(container);

    Regards,
    Markov

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.