diff options
author | Teemu Suo-Anttila <tsuoanttila@users.noreply.github.com> | 2017-03-09 09:29:51 +0200 |
---|---|---|
committer | Pekka Hyvönen <pekka@vaadin.com> | 2017-03-09 09:29:51 +0200 |
commit | 761c94ab2e1019f7d83d4e8d63254de1ee591d75 (patch) | |
tree | bd167811a86c0c666d321bdbfdb57dea980cb942 /documentation | |
parent | 264ee7696568827815604f1e22ce7e330775b3ce (diff) | |
download | vaadin-framework-761c94ab2e1019f7d83d4e8d63254de1ee591d75.tar.gz vaadin-framework-761c94ab2e1019f7d83d4e8d63254de1ee591d75.zip |
Initial implementation of ComponentRenderer for Grid (#8743)
Fixes #8622
Fixes #8623
Diffstat (limited to 'documentation')
-rw-r--r-- | documentation/components/components-grid.asciidoc | 43 |
1 files changed, 41 insertions, 2 deletions
diff --git a/documentation/components/components-grid.asciidoc b/documentation/components/components-grid.asciidoc index 957a9a7fb4..7fd6332dd6 100644 --- a/documentation/components/components-grid.asciidoc +++ b/documentation/components/components-grid.asciidoc @@ -448,7 +448,7 @@ The column type must be a [interfacename]#Resource#, as described in + [source, java] ---- -Column<ThemeResource> imageColumn = grid.addColumn( +Column<Person, ThemeResource> imageColumn = grid.addColumn( p -> new ThemeResource("img/"+p.getLastname()+".jpg"), new ImageRenderer()); ---- @@ -478,7 +478,7 @@ Set the renderer in the [classname]#Grid.Column# object: + [source, java] ---- -Column<String> htmlColumn grid.addColumn(person -> +Column<Person, String> htmlColumn grid.addColumn(person -> "<a href='" + person.getDetailsUrl() + "' target='_top'>info</a>", new HtmlRenderer()); ---- @@ -502,6 +502,45 @@ Column<Integer> birthYear = grid.addColumn(Person::getBirthYear, [classname]#ProgressBarRenderer#:: Renders a progress bar in a column with a [classname]#Double# type. The value must be between 0.0 and 1.0. +[classname]#ComponentRenderer#:: Renders a Vaadin [classname]#Component# in a column. Since components +are quite complex, the [classname]#ComponentRenderer# comes with possible performance issues. +To use it efficiently you should use as few nested components as possible. + ++ +Use [classname]#Button# in [classname]#Grid#: ++ +---- +grid.addColumn(person -> { + Button button = new Button("Click me!"); + button.addClickListener(click -> + Notification.show("Clicked: " + person.toString())); + return button; +}, new ComponentRenderer()); +---- + +Components will occasionally be generated again during runtime. If you have a state in your +component and not in the data object, you need to handle storing it yourself. Below is a simple +example on how to achieve this. + ++ +Store a [classname]#TextField# with changed value. ++ +---- +Map<Person, TextField> textFields = new HashMap<>(); +grid.addColumn(person -> { + // Check for existing text field + if (textFields.containsKey(person)) { + return textFields.get(person); + } + // Create a new one + TextField textField = new TextField(); + textField.setValue(person.getLastname()); + // Store the text field when user updates the value + textField.addValueChangeListener(change -> + textFields.put(person, textField)); + return textField; + }, new ComponentRenderer()); +---- [[components.grid.renderer.custom]] === Custom Renderers |