Can I change of row_height of gantt through button click?

Gantt React Gantt
#1

Initially, we have row_height=64 in my code and I want to add two buttons where one button changes the row_height to 36 and when I click the second button it will change to its original row_heigt which is 64.
how I can implement this?

@ramil @RangRang @Rawat

#2

Hello,
You can set the value to the gantt.config.row_height parameter, then you need to call the render method to repaint the changes:
https://docs.dhtmlx.com/gantt/api__gantt_render.html

Here is the snippet:
https://snippet.dhtmlx.com/0kvanvnp

#3

function changeRowHeight(value) {
gantt.config.row_height = value;
gantt.render();
}

    document.addEventListener("click", (event) => {
        const dataAction = event.target.getAttribute('data-action');
        if (dataAction) {
            switch (dataAction) {
                default: {
                    const images = document.querySelectorAll(".img-circle");
                    images.forEach(e => {
                        if (e.classList.contains('hidden')) {
                            e.classList.remove('hidden');
                        } else {
                            e.classList.add('hidden');
                        }
                    });
                    const profileImages = document.querySelectorAll(".profile-icon");
                    profileImages.forEach(e => {
                        if (e.classList.contains('hidden')) {
                            e.classList.remove('hidden');
                        } else {
                            e.classList.add('hidden');
                        }
                    });
                    const designation = document.querySelectorAll(".row-subheading");
                    designation.forEach(e => {
                        if (e.classList.contains('hidden')) {
                            e.classList.remove('hidden');
                        } else {
                            e.classList.add('hidden');
                        }
                    });
                    changeRowHeight(34);
                }
            }
        }
    });

i am using this code after adding that changerowHeight function my switch button is not working means its not checking after clicking on that so please help me on this.
I think gantt.render is making interrupt on making switch button work.
so do we have any other ways to make this work without including gantt.render.

#4

@ramil please help on this

#5

Hello,
The render method only repaints the data in Gantt. It shouldn’t affect anything outside the Gantt container.
I tried to reproduce the issue in the snippet, but the row height is changed correctly:
https://snippet.dhtmlx.com/mi2jqfr0

It is hard to suggest what might be wrong as I don’t see your code.
Please add your configuration to the following snippet and make sure that the issue is reproduced there:

Then, click on the Save button and send me the link.
Or send me a ready demo with all the necessary JavaScript and CSS files so that I can reproduce the issue locally.

#6

add changerowHeight button in the place of starttime in the sidecolumn then write this code then you see it is not working.

#7

https://snippet.dhtmlx.com/eeda95gx

this is snippet you will see switch button will not work and its class will not work.
@ramil

#8

Hello,
I couldn’t reproduce the issue in the snippet you shared:
https://files.dhtmlx.com/30d/eb02d57b0fe6a9880151e39285ed0f86/vokoscreen-2024-06-17_12-08-56.mp4