Help with Webix Grid Resizing

Kevin_Pat9

I’m playing around with Webix Grid and running into issues with resizing. I have it inside a container with width of 100% <div id='testA' style='width:100%'></div>. This does not work.
this is the config I use
webix.grid({
container:"testA",
id:"grid1",
autowidth: true,
columns:[
{ id:"rank", header:"", css:"rank", width:50},
{ id:"title", header:"Film title", fillspace:true},
{ id:"year", header:"Released", width:80 },
{ id:"votes", header:"Votes", width:100 }
],
data:grid_data,
scrollY:false
});
I want my grid to fit the whole screen. But the grid always keeps width the same.

Natalia_Shilova

Hello Kevin_Pat9,

By default, if no container is specified at all, the Grid is initialized in the body and takes up the available space, resizing along with the body.
If a container is specified, the Grid takes its initial dimensions.
If the Grid has a fixed size (set through configuration or taken from the initial state of the container), it retains that size regardless of the container's resizing.

Please check the example: https://snippet.webix.com/tk5xwatm

To make the Grid resize to the container size, you need to listen to the container resize event and either call adjust method to adjust the component to the size of the parent HTML container, or use define + resize methods.
Please check the example: https://snippet.webix.com/v454ijx7

Also you can use ResizeObserver if the size needs to be calculated additionally.
Here is the demo with ResizeObserver: https://snippet.webix.com/r6excw2i