I am assessing the use of DHTMLX Gantt in a react project. Currently I am looking at the base package, though if it looks promising I will look at the Pro version.
I’ve really struggled with getting the horizontal scrollbar to work. If I set scale to hours (which I need), I find that tasks that are on days in the future are hidden, and I can’t scroll to them.
In the following the horizontal scrollbar seems to be there, but greyed out.
In the following, i’ve zoomed out to show that there are tasks to the right.
Cant Get to These Tasks Using Scrollbar
Here is another example, I cant get to the first task (on February 25) using the scrollbar:
https://drive.google.com/file/d/1wlwxYakx6LKmTRX0AFsXGeCDgu9eRW9-/view?usp=sharing
I’ve tried many options in code.
Primary Question
Why is the scrollbar not working?
Layout Configuration
This is my current layout, but I’ve tried many options including the default.
const getDefaultLayout = () => {
return {
css: "gantt_container",
cols: [
{
width: 500,
min_width: 300,
// adding horizontal scrollbar to the grid via the scrollX attribute
rows: [
{
view: "grid",
scrollX: "gridScroll",
scrollable: true,
scrollY: "scrollVer",
},
{ view: "scrollbar", id: "gridScroll" },
],
},
{ resizer: true, width: 1 },
{
rows: [
{
view: "timeline",
scrollX: "scrollHor",
scrollable: true,
scrollY: "scrollVer",
},
{ view: "scrollbar", id: "scrollHor" },
],
},
{ view: "scrollbar", id: "scrollVer" },
],
};
};
I’ve also played with the following configurations (the booleans i’ve tried as false and as true):
gantt.config.autoscroll = true;
gantt.config.grid_elastic_columns = true;
gantt.config.fit_tasks = true;
gantt.config.scale_offset_minimal = true;
gantt.config.show_tasks_outside_timescale = true;
gantt.config.autoscroll_speed = 50;
I construct my Gantt chart as follows:
const Gantt = (props) => {
const inputEl = useRef(null);
const [setupComplete, setSetupComplete] = useState(false);
const { serviceUrl, tasks, zoom } = props;
var setup_done = false;
useEffect(() => {
setSetupComplete(true);
configureGantt(tasks, inputEl.current, serviceUrl, zoom);
}, []);
if (setupComplete) {
setZoom(zoom);
}
return (
<>
<div ref={inputEl} style={{ width: "100%", height: "100%" }} />
</>
);
};
export default Gantt;
This is very similar to the DHTMLX provided react example (on Github), in fact I used the zoom approach found in that example in my own code.
The primary difference is I use React functional interface rather than the older style React components.
Google Drive Links
If the google drive images dont load for you either refresh the page with the link, or copy the links and paste them into a new tab, or use this folder in a new tab
https://drive.google.com/drive/folders/1htx48H47I-eb5Ynka97OgtNz7uwXEHEN?usp=sharing
https://drive.google.com/file/d/1cvNpZtPoBFxdIFoIfafu0FjBd7roFwmq/view
https://drive.google.com/file/d/18i4mZTq-kPy5JwKVex9GUcvmxlkjZpEp/view?usp=sharing