Collpase resources

Gantt
#1

Hi, can I somehow collapse and expand resources smoothly at the click of a button?

50a79e139d6204cbedf5b2aaf3f9c202b6faeb99
50a79e139d6204cbedf5b2aaf3f9c202b6faeb991768×990 250 KB

7e797f3a4fb471e4e5aa4d448609963f5a9085b8
7e797f3a4fb471e4e5aa4d448609963f5a9085b81768×990 216 KB

#2

Hello,
You can try to achieve this by applying CSS transitions to the height property:

.smooth-transition {
    transition: height 0.5s ease-in-out;
}

gantt.$root.querySelector(".collapse-button").onclick = function() {
    const newHeight = 0;
    const container = gantt.$root.querySelectorAll(".gantt_layout_cell")[1];
    container.classList.add("smooth-transition");
    container.style.height = newHeight + "px";
};

Here is an example: DHTMLX Snippet Tool . Please note that this example requires further development and testing.

#3

Hello, is there a possibility that the height of the resource table will always be according to the amount of content, without scrolling, and the rest of the space will already be occupied by a gantt chart?

#4

Hello,
There is no built-in solution for this, but you can achieve it manually. Here’s one way to do it:

gantt.attachEvent("onGanttReady", () => {
    const resourcesStore = gantt.getDatastore("resource").pull;
    gantt.config.layout.rows[2].height = Object.keys(resourcesStore).length * 36 + gantt.config.scale_height + 1;
    gantt.resetLayout();
});

Here’s a working example: DHTMLX Snippet Tool

#5

thanks for response, but only by default, my first-level rows are expanded, and the deeper-level rows are collapsed, also in your example, if you collapse a row, there is empty space at the bottom, and the resource table is on top, also when opening and closing rows, the height should change

#6

Hello,
I’ve slightly improved the solution. Now it tracks when a resource is collapsed, recalculates the height, and updates the resource view accordingly:

gantt.attachEvent("onGanttReady", () => {
    updateResourceHeight();
});

function updateResourceHeight() {
    const resourcesStore = gantt.getDatastore("resource").pull;
    let visibleResources = 0;

    // Iterate through all resources and count only visible ones
    for (let id in resourcesStore) {
        let resource = resourcesStore[id];

        if (isParentVisible(resource)) {
            visibleResources++;
        }
    }

    // Calculate the new height based on the number of visible resources
    const newHeight = visibleResources * 36 + gantt.config.scale_height + 1;

    gantt.config.layout.rows[2].height = newHeight;
    gantt.resetLayout();
}

function isParentVisible(resource) {
    if (!resource.parent) return true;
    let parent = gantt.getDatastore("resource").getItem(resource.parent);

    if (parent && !parent.$open) {
        return false;
    }

    return isParentVisible(parent);
}

gantt.attachEvent("onEmptyClick", (e) => {
    if (e.target.closest('.gantt_tree_icon.gantt_close')) {
        let parent = e.target.closest('.resourceGrid_cell');
        
        if (parent) {
            gantt.message(`Update height`);

            setTimeout(() => {
                updateResourceHeight();
            }, 0);
        }
    }
});

Here is an example: DHTMLX Snippet Tool . Please note that this example is not complete, and you will need to refine the height recalculation logic when expanding a resource.