Sizing

In this chapter you will learn how to set and change sizes for 3 different DataGrid elements:

DataGrid container,
Column,
Row

in 3 possible situations (scenarios):

Setting a fixed size,
Autosizing,
Resizing.

Setting Correct Sizes

The width and height of a datagrid must be set through number values. The usage of string values is incorrect and will cause errors in the sizing logic.

webix.grid({
  height:400,
  width:300
});

Setting Fixed Size

DataGrid container

By default, DataGrid adjusts to the size of the parent container that gives us 2 ways to set the fixed size for it:

to set the size of the parent ‘div’ container
to use the width and height parameters within DataGrid constructor.

Setting the fixed size for DataGrid

<div id="box" style="width:300px;height:400px;"></div>

webix.grid({
  container:"box",
  // datagrid configuration
});

// way 2
<div id="box"/>

webix.grid({
  container:"box",
  height:400,
  width:300,
  // other config settings
});

Column

Fixed column width

By default, datagrid columns are 100px wide and their width cannot be changed via the UI.

You can change the value for a particular column or for all the grid in general.

To change the size of a particular column use:

width while configuring the column to set width to a column individually;
minWidth in the column configuration to define the minimum width for it. If there’s more space initially or after resizing, column width will be increased, but it can never be less than minWidth value;
maxWidth in the column configuration to define the maximum width for it. On resizing, the component cannot take more space than specified. At the same time, the component may take smaller width values and take less space.

You can also use the following properties to set the changes for all columns in a grid:

columnWidth while configuring the datagrid to set a common width for all the columns. Like the default common width, it can be overridden by width for a specific column;
minColumnWidth property in datagrid configuration to set common minimum width for all columns. It can be overridden by minWidth for a specific column;
maxColumnWidth property in datagrid configuration to set common maximum width for all columns. It can be overridden by maxWidth for a specific column.

Setting different widths for columns

webix.grid({
  columns:[
    { id:"title", header:"Film title" ,   width:80},
    { id:"title", header:"Release year" , maxWidth:100}
  ]
});

Altering common width for all columns

webix.grid({
  columnWidth:200,
  columns:[
    { id:"title", header:"Film title"},
    { id:"title", header:"Release year"}
  ]
});

Relative Sizing

adjusting the width of datagrid to the parent container

If the sum of column widths is less than the width of the parent container, you can use the fillspace attribute to make some of columns fill the unused space.

Using attribute fillspace

webix.grid({
  columns:[
    { id:"title", header:"Film title", fillspace:true},
    // more columns
  ]
});

adjusting the width of a column to other datagrid columns

There can be more than one fillspace in the datagrid. You can set fillspace as a number. The width of the grid will be proportionally divided between columns:

webix.grid({
  columns:[
    { id:"id", header:"ID", fillspace:1},
    { id:"title", header:"Film title", fillspace:4}
  ]
});

In the above code, the title column is 4 times wider than the id column, which is 20% to 80%.

adjusting the width of a column to its content

If you want to adjust the width of a column to the related content size, you can use the adjust attribute. It is defined for the needed column individually and features the following modes:

“data” - adjusts the column width to the content of the widest item in it;
“header” - adjusts the column width to its header content;
true - searches for the widest item among data and header(s) and adjusts column width to its content.

Adjusting the column width to fit the content size

webix.grid({
  columns:[
    { id:"title", header:"Film title", adjust:"data"},
        { id:"rank", header:"Rank", adjust:"header"},
        { id:"votes", header:"Votes", adjust:true}
    // more columns
  ]
})

Note that the resulting column width after adjusting won't be smaller than **minWidth** and bigger than **maxWidth** for this column provided that *minWidth* and *maxWidth* are set.

If you have a large dataset, you can limit the number of rows that will take part in the calculation of the maximum column width with the help of the adjustBatch attribute of the column config. The property works in tandem with the adjust:“data” or adjust:true attributes.

webix.grid({
  columns:[
  {id:"id"},
  {id:"title", adjust:"data", adjustBatch:50},
  {id:"title", adjust:true}
  ],
  //data count is big
  data:grid_data
});

Row

To set the fixed height for a row, you should use $height while defining the data you will load into DataGrid. If you set the height in such a way, it will save its value regardless of any other enabled size parameters (e.g. - autoheight).

Note that you need to provide the **fixedRowHeight:false** setting for the datagrid as well, to avoid errors in the scroll or editors position.

Setting different heights for rows

webix.grid({
  fixedRowHeight:false,
  data:[
         { $height:20, id:1, title:"The Shawshank Redemption", year:1994},
        { $height:40, id:2, title:"The Godfather",            year:1972},
        // other data fields
    ]
});

Autosizing

Autosizing to parent container

DataGrid automatically adjusts to the size of a parent container provided that no content autosizing is enabled.

To make the DataGrid fill the entire width, you should define fillspace for at least one of its columns:

webix.grid({
  columns:[
    { id:"title", header:"Film title", fillspace:true},
        { id:"year", header:"Year", width:100}
  ]
});

In this case, the title column will be calculated as container width - 100.

Autosizing to content

You can enable width, height (or both of them) autosizing to adjust DataGrid to the size of its content horizontally or vertically. Autosizing is enabled by the following parameters:

autowidth;
autoheight.

DataGrid autosizing

webix.grid({
  autoheight:true,
  autowidth:true
});

Resizing by User

Mouse resizing

To enable the possibility to resize columns (rows) by mouse you should use one of the following parameters (or both of them at once):

resizeRow;
resizeColumn.

Enabling the possibility to resize columns and rows by mouse

webix.grid({
  resizeColumn:true,
  resizeRow:true
});

For these resizing options there exist relevant events onRowResize and onColumnResize.

Related sample: Column and Row Resizing

Setting custom size for area where “resize” is detected

You can also define the size of the area where resizing can be activated. You can do this by setting the resizeRow or resizeColumn parameters and passing an object with the size property to them:

webix.grid({
  resizeColumn: {size: 6},
   resizeRow: {size: 6}
});

Related sample: Size of Resize Area

Resizing only in the header area

One more resizing possibility is to limit the area allowed for resizing to the datagrid header.

It can be achieved by specifying the resizeRow or resizeColumn parameters and passing an object with the headerOnly property set to true to them:

webix.grid({
    resizeColumn: {headerOnly:true},
    resizeRow: {headerOnly:true}
});

Disable resizing of a particular column

You can disable resizing of a particular column by setting the column’s resize property to false:

webix.grid({
  // enable resizing of all columns
  resizeColumn: true,
  columns:[
    // disable resizing of the rank column
    { id:"rank", resize:false, header:"", css:"rank", width:50},
    { id:"title", header:"Film title",  fillspace:true},
    { id:"year", header:"Year", width:80},
    { id:"votes", header:"Votes", width:100}
  ],
});

Resizing by API

The component has the resize() method. When you change widget size and call this method, it will adjust to the new size.

Adjusting the parent container to the DataGrid size

const grid = webix.grid({
  // datagrid configuration
})

grid.define("width", 700);
grid.resize();

In some situations you may need to adjust an element to the size of the outer parent HTML container. In such a situation you may use method adjust() instead of resize():

Adjusting DataGrid to the size of the parent container

const grid = webix.grid({
  container:"box",
  // datagrid configuration
});

document.querySelector(".box").style.width = "700px";
grid.adjust();

The resize() and adjust() methods can lead to one and the same effect. For example, you have DataGrid placed into a ‘div’ container named ‘box’. The initial height of DataGrid is 50 px. You want to increase it to 80 px. Possible solutions can look as shown in the table below:

Image Related code

**Table 1** Use of adjust() and resize() methods
Image	Related code
	`document.getElementById('box').style.height="80px"; grid.adjust();` `</td> </tr> <tr> <td><img src="/docs/media/resize-method-use.png"></img></td> <td>` `grid.define("height", 80); grid.resize();` `</td> </tr> </tbody>`

document.getElementById('box').style.height="80px";
grid.adjust();

  </td>
</tr>
<tr>
  <td><img src="/docs/media/resize-method-use.png"></img></td>
  <td>

grid.define("height", 80);
grid.resize();

  </td>
</tr>
</tbody>

You can use event handlers to call the above methods:

Adjusting DataGrid to the size of a window, it’s placed into

window.addEventListener("resize", () => {
  grid.adjust();
})

Related sample: Sizing and Events

Adjusting of Columns and Rows

To dynamically adjust the column width or row height to the size of their content, you can use the corresponding DataGrid API.

Adjusting column width

The adjustColumn(id) method adjusts the width of a chosen column specified by its ID.

The method takes two parameters:

id - (string,number) the ID of a column;
mode - (string) optional, the adjustment mode (“header”, “data”, “all”).

grid.adjustColumn("title");
grid.adjustColumn("title", "header");

The adjustment modes are:

header - adjusts the column to the width of its header;
data (default) - adjusts the column to the width of its content;
all - combines the above mentioned modes and adjusts the column to the bigger value.

Adjusting row height

The adjustRowHeight(id) method adjusts the height of all rows based on the cell content of a particular column or all columns.

Note that the method can slow down the application.

The method takes two optional parameters:

columnId - (string) the ID of a column
silent - (boolean) apply the method without repainting

Note that you need to set fixedRowHeight to false for your datagrid, otherwise the method will not have any visible result.

webix.grid({
  fixedRowHeight:false,
    columns:[
    { id:"title", header:"Film title", fillspace:true},
        { id:"year", header:"Year", width:100}
  ]
});

// adjusts the height of each row to
// the height of the "title" column cells
dtable.adjustRowHeight("title");

// adjusts the height of each row to the highest cell in it
dtable.adjustRowHeight();

The row height is adjusted to:

the height of the cell in a column, which is defined by the columnId parameter;
the height of the “biggest” cell in a row, if columnId is not provided.

If you want to apply auto-sizing just after data loading, you can use the following code:

webix.grid({
  columns:[
    { id:"rank",  width:40,  header:"", css:"rank"},
    { id:"title",  width:380,  header:"Film title" },
    { id:"year",  width:160,  header:"Released"   },
    { id:"votes",  width:120,  header:"Votes"    }
  ],
  fixedRowHeight:false,
  on:{
    "onresize":webix.once(function(){
      this.adjustRowHeight("title", true);
    })
  }
});

Related sample: Row Auto-Height

Scrolling

By default, scrolling (vertical and horizontal) is enabled in DataGrid. It can be disabled by parameters scrollY, scrollX.

Disabling vertical scrolling

webix.grid({
  scrollY:false
});

You can also force DataGrid to be scrolled just by whole rows, i.e. you won’t be able to scroll along the full length of rows. The related parameter you should enable is scrollAlignY:

Scrolling DataGrid by whole rows

webix.grid({
  scrollAlignY:true
});