Hi Everyone: I’m trying to achieve something like flex box where the webix content gets resized based on the dynamic sizing of the window? Any suggestions how to go about this?
I started with sometime:
grid = new webix.ui({
container:“areaA”,
view:“datatable”,
columns:columnData,
autoheight:true,
autowidth:true,
select:“row”,…
I’ve set the autowidth to true … so how can I extend the table with its contents to the full width of the window available?
autowidth will set size of grid to fit all columns
if you need to fit the component to the window, or container - just do not use any width and height settings at all, this is the default behavior.
After removing the autowidth and autoheight, the only problem is that the table is extending beyond the window (ie. half of the last column is visible). What would I need to change to fix this?
Also… is there a way to do this resizing with forms?
Data is not displaying until I move the window to resize, the data displays … I have to continue to move the window sizing until all the datatable can display.
Here is the code I’m using:
grid = new webix.ui({
container:"areaA",
view:"datatable",
columns:columnData,
select:"row",
on:{
onSelectChange:function(){
var text = "Selected: "+grid.getSelectedId(true).join();
document.getElementById('areaB').innerHTML = text;
}
},
data:resultData
});
function equals(a,b){
a = a.toString().toLowerCase();
return a.indexOf(b) !== -1;
}
function oneForAll(value, filter, obj){
if (equals(obj.id, filter)) return true;
if (equals(obj.name, filter)) return true;
return false;
};
webix.event(window, "resize", function(){ grid.adjust(); })
If you are creating the component on document body - it will adjust on window.resize automatically. If you are creating component in some container - you need to add the resize code manually, like the above one.
Also, the same sizing logic works for all component. Component without height and width defined will try to adjust to the size of its html container.