From 2cbe2f54635f2cab56182925ef4ab1bb3041ecdc Mon Sep 17 00:00:00 2001 From: Erik Lumme Date: Fri, 15 Sep 2017 12:43:57 +0300 Subject: [PATCH] Migrate ConfiguringGridColumnWidths --- .../ConfiguringGridColumnWidths.asciidoc | 72 +++++++++++++++++++ documentation/articles/contents.asciidoc | 1 + 2 files changed, 73 insertions(+) create mode 100644 documentation/articles/ConfiguringGridColumnWidths.asciidoc diff --git a/documentation/articles/ConfiguringGridColumnWidths.asciidoc b/documentation/articles/ConfiguringGridColumnWidths.asciidoc new file mode 100644 index 0000000000..322780c422 --- /dev/null +++ b/documentation/articles/ConfiguringGridColumnWidths.asciidoc @@ -0,0 +1,72 @@ +[[configuring-grid-column-widths]] +Configuring Grid column widths +------------------------------ + +To try out how the widths of Grid columns work in different situations, +we'll use the same base implementation as in the +link:UsingGridWithAContainer.asciidoc[Using Grid with a Container] +example. + +Grid does by default check the widths of all cells on the first pageful +of data and allocate column widths based on that. If there's room to +spare, each column gets and equal share of the extra pixels. + +There is usually one or maybe two columns that would most benefit from +some additional breathing room, but Grid can't know which columns that +is unless you tell it. You can do so using the `setExpandRatio(int)` +method for a column. + +[source,java] +.... +grid.getColumn("name").setExpandRatio(1); +.... + +When setting one column to expand, all the extra space gets allocated to +that column. This might instead cause the other columns to be too +tightly spaced. One easy way of avoiding this is to use `setWidth(double)` +to set a pixel size for columns that are not expanded. + +[source,java] +.... +grid.getColumn("name").setExpandRatio(1); +grid.getColumn("amount").setWidth(100); +grid.getColumn("count").setWidth(100); +.... + +Reducing the width of Grid does now cause the `Name` column to shrink +while the two other columns keep their defined original sizes. We might, +however, want to prevent the `Name` column from becoming too narrow by +giving it a minimum width. Without any defined minimum width, the widths +of the cell contents of the first pageful of data will define the +minimum width. If there's not enough room for all columns, Grid will +automatically enable horizontal scrolling so that all columns can still +be accessed. + +[source,java] +.... +grid.setWidth("400px"); +grid.getColumn("name").setMinimumWidth(250); +grid.getColumn("amount").setWidth(100); +grid.getColumn("count").setWidth(100); +.... + +With horizontal scrolling, it might be desirable to still keep columns +identifying each row visible all the time so that it's easier for the +user to interpret the data. This can be done by freezing a number of +columns, counted from the left, using the `setFrozenColumnCount(int)` +method. By default, only the column showing selection state in +multiselect mode is frozen. This column can also be unfrozen by setting +the count to -1. + +[source,java] +.... +grid.setWidth("400px"); +grid.setFrozenColumnCount(1); +grid.getColumn("name").setMinimumWidth(250); +grid.getColumn("amount").setWidth(100); +grid.getColumn("count").setWidth(100); +.... + +If the width of Grid is again increased so that all columns can fit +without scrolling, the frozen columns will behave just as any other +column. diff --git a/documentation/articles/contents.asciidoc b/documentation/articles/contents.asciidoc index 3830ddf0d3..bf5f4ca2fb 100644 --- a/documentation/articles/contents.asciidoc +++ b/documentation/articles/contents.asciidoc @@ -25,3 +25,4 @@ - link:CreatingAReusableVaadinThemeInEclipse.asciidoc[Creating a reusable Vaadin theme in Eclipse] - link:CreatingATextFieldForIntegerOnlyInputWhenNotUsingADataSource.asciidoc[Creating a TextField for integer only input when not using a data source] - link:FormattingDataInGrid.asciidoc[Formatting data in grid] +- link:ConfiguringGridColumnWidths.asciidoc[Configuring Grid column widths] -- 2.39.5