Hello,
i am using TreeGrid v.6.2 within a React application.
My goal is to resize the viewport of my Treegrid whenever the user resizes the window. But width and height stay always as initially rendered. The following code shows the main parts of my approach.
class GanttComponent extends Component {
constructor() {
super();
// ...
// experimental
this.state = {
width: 0,
};
}
componentDidMount() {
const {
columns,
data,
// ...
} = this.props;
this.treegrid = new TreegridDHX(this.el, {
columns,
data,
// ...
});
// ...
// experimental (https://stackoverflow.com/questions/19014250/rerender-view-on-browser-resize-with-react)
window.addEventListener('resize', this.updateDimensions);
}
componentWillReceiveProps() {
// ...
}
componentWillUnmount() {
// ...
}
// ...
// experimental
updateDimensions() {
console.log(`updateDimensions called with ${window.innerWidth}`);
this.treegrid.width = window.innerWidth;
this.treegrid.paint();
this.setState({
width: window.innerWidth,
});
}
render() {
console.log(`render called with ${this.state.width}`);
return (
<div
style={{
// experimental
// width: this.state.width > 0 ? `${this.state.width}px` : '100%',
width: '100%',
height: '100%',
}}
ref={(el) => {
this.el = el;
return this.el;
}}
/>
);
}
}
Any hint or support would be very appreciated.
Thx!