setFlexGrow() in Grid

Flow
1

Hi everyone,

Can somebody help with the understanding of setFlexGrow() method in Grid. If i have 4 column and i want two of them to be twice as wide as the other ones, what should be the value in the method. It is 0 by default but what is the maximum value. So i can divide it by four and give exact parts of the whole grid to each column.

 grid.addColumn(Person::getFullName).setHeader("Full name").setKey("fullname").setFlexGrow(?);
 grid.addColumn(Person::getShortName).setHeader("Short name").setKey("shortname").setFlexGrow(?);
 grid.addColumn(Person::getEmail).setHeader("Email").setKey("email").setFlexGrow(?);
 grid.addColumn(Person::getAddress).setHeader("Address").setKey("address").setFlexGrow(?);

-----------------------official documentation---------------------------------

public Grid.Column setFlexGrow(int flexGrow)

Sets the flex grow ratio for this column. When set to 0, column width is fixed.

Parameters:

flexGrow - the flex grow ratio

Returns:
this column, for method chaining

Thanks,
Vladislav

2

the flex-grow attribute is to tell the columns how to behave when there is excess space. Use column.setWidth(..) for the actual definition of its width.

Let me try to make an example how flex-grow works:
Let us assume we have a grid that is 1000px wide, with 3 columns.

column1: 
	width: 100px
	flex-grow: 0
column2:
	width: 300px
	flex-grow: 1
column3:
	width: 300px
	flex-grow: 2

All columns together are 700px wide, so the grid has 300px excess width, and lets the columns grow width until the whole grid-width is used up, Column 1 will never be wider than 100 because of its flex-grow of 0. So the 300 pixels are only divided onto column 2 and 3. Column 2 will take 1 part, while column 3 will take 2 parts. This makes 3 parts in total so we divide the excess width by 3 → one part is equivalent to 100px. This means column 1 grows by 100px (final width: 400px), column 3 grows by 200px (final width: 500px).
If in this example, the column3 had also flex-grow:1, then both column 2 and 3 would grow by equals parts → 150px each (final widths 450px each).

So, coming to your actual question now about your grid with 4 columns. First, set the width of the columns to values that fulfill your requirements (2 columns are double as wide as the other 2). Make the widths small so you are sure to not use up more width than the grid is wide. for example 50px, 50px, 100px, 100px

Now you set flex-grow, this value must also be doubled for the wider columns. for example 1, 1, 2, 2. This makes sure that if the grid is wider than 300px, the wider columns will grow double as fast as the small columns.

grid.addColumn(Person::getFullName).setHeader("Full name").setKey("fullname").setWidth("100px").setFlexGrow(2); // wide column
grid.addColumn(Person::getShortName).setHeader("Short name").setKey("shortname").setWidth("50px").setFlexGrow(1); // narrow column
grid.addColumn(Person::getEmail).setHeader("Email").setKey("email").setWidth("50px").setFlexGrow(1); // narrow column
grid.addColumn(Person::getAddress).setHeader("Address").setKey("address").setWidth("100px").setFlexGrow(2); // wide column

I hope my explanation is not too confusing. If you have any questions please ask.

3

Thanks Kaspar,

Now i get how it works. I guess i always thought that using pixels for size is not a good approach, because of different resolutions. Usually i use full size for the grid. But with flexGrow() every column will look as i want to.

Best Regards,
Vladislav Marinov