Grid Renderers collection For Vaadin7
Collection of 13 Grid Renderers for editing and viewing data plus Keyboard navigation extension for editable renderers for Vaadin 8 and 7.
BrowserOpenerRenderer
A button for Grid that opens new browser window with url in Grid cell or UI given in constructor with uri fragment in Grid cell. This one supports also HTML content in caption and has click event inherited from HtmlButtonRenderer.
DeleteButtonRenderer
Two stage (Delete & Confirm) Delete action button. Delete and Confirm texts can be configured e.g. for localization. There is style name for Confirm state in order to add accent in custom theme if needed.
SimpleSelectRenderer
Select a value with popup selector from small set of values. This Renderer is like ComboBox, but much simpler. With Converter it is possible to map non String values to String. See demo.
BlobImageRenderer
Render image from byte[]. Handy if bean is read from database and image is a Blob. Do not use for large images to avoid excess overhead. Prescale images close to target resolution.
CheckboxRenderer
Single-click editor for boolean columns - Editor aware. Most suitable for unbuffered Grid(Vaadin 7.6+) Label options can be configured for localization.
BooleanSwitchRenderer
Alternative version of CheckboxRenderer similar to editable renderers.
DateFieldRenderer
Inline Dates editor
TextFieldRenderer
Multipurpose inline Text editor. Supports various types of data using com.vaadin.data.util.converter.Converter
SparklineRenderer
Tiny chart in a Grid cell with many configuration options.
RatingStarsRenderer
RatingStarsRenderer is based on Widget in RatingStars add-on by Teemu Pöntelin. You can use RatingStarsRenderer both as a view only or editable field renderer. The max number of stars can be also configured.
ConverterRenderer (Vaadin 8 only)
Did you like to use HTMLRenderer together with Converter to display e.g. conditiomally formatted numbers based on value etc. with Vaadin 7 and now miss the possibility to add Converter withoutBinder? Well use this handy helper.
HtmlButtonRenderer
Alternative to the ButtonRenderer included to Vaadin framework. This one supports also HTML content and does not propagate click event when used.
RowIndexRenderer
Add row index number column to Grid with this simple Renderer. Example: grid.addColumn(value -> "", new RowIndexRenderer()).setCaption("Row index");
GridNavigationExtension
This is not renderer, but very useful extension to be used alongside them. GridNavigationExtension makes possible to quickly navigate Grid with keyboard and input data with editable Renderers. See the demo. GridNavigation extension was originally written by Mikael Granqvist.
Note, there is another similar type of extension available also for use with Grid's unbuffered editor, which is called GridFastNavigation https://vaadin.com/directory#!addon/gridfastnavigation-add-on
Sample code
// Basic use Grid.Column yes = grid.getColumn("yes"); yes.setRenderer(new CheckboxRenderer()); // Example of using Editable renderer BooleanSwitchRenderer booleanRenderer = new BooleanSwitchRenderer("Not true","True"); booleanRenderer.addItemEditListener(new ItemEditListener() { @Override // Use itemEdited event to commit changed data to database, etc. public void itemEdited(ItemEditEvent event) { myFacade.commit(event.getItemId()); } } ); yes.setRenderer(booleanRenderer); // Example of TextFieldRenderer with Converter grid.getColumn("number").setConverter(new StringToBigDecimalConverter()); TextFieldRenderer<BigDecimal> decimalFieldRenderer = new TextFieldRenderer<BigDecimal>(); decimalFieldRenderer.addItemEditListener(new ItemEditListener() { @Override public void itemEdited(ItemEditEvent event) { ... do something here ...; } } ); grid.getColumn("number").setRenderer(decimalFieldRenderer);
// Add column with Boolean check box and event BooleanSwitchRenderer<SimplePojo> booleanRenderer = new BooleanSwitchRenderer<>(SimplePojo::setTruth,"True","False"); booleanRenderer.addItemEditListener(event -> { System.out.println("Boolean switched: "+event.getNewValue()); }); grid.addColumn(SimplePojo::isTruth, booleanRenderer).setCaption("Truth"); TextFieldRenderer<SimplePojo,String> textFieldRenderer = new TextFieldRenderer<>(SimplePojo::setDescription); textFieldRenderer.setBlurChangeMode(true); textFieldRenderer.addItemEditListener(event -> { System.out.println("Description edited: "+event.getNewValue()); }); grid.addColumn(SimplePojo::getDescription, textFieldRenderer).setCaption("Description"); TextFieldRenderer<SimplePojo,BigDecimal> decimalFieldRenderer = new TextFieldRenderer<>(SimplePojo::setNumber); decimalFieldRenderer.setConverter(new StringToBigDecimalConverter("Error message")); decimalFieldRenderer.addItemEditListener(event -> { System.out.println("Big decimal edited: "+event.getNewValue()); }); grid.addColumn(SimplePojo::getNumber, decimalFieldRenderer).setCaption("Big decimal"); DateFieldRenderer<SimplePojo> dateFieldRenderer = new DateFieldRenderer<SimplePojo>(SimplePojo::setDate); dateFieldRenderer.setBlurChangeMode(true); dateFieldRenderer.setDateResolution(DateResolution.DAY); dateFieldRenderer.addItemEditListener(event -> { System.out.println("Date edited: "+event.getNewValue()); }); grid.addColumn(SimplePojo::getDate, dateFieldRenderer).setCaption("Date"); RatingStarsRenderer<SimplePojo> ratingStarsRenderer = new RatingStarsRenderer<SimplePojo>(SimplePojo::setStars,5); ratingStarsRenderer.addItemEditListener(event -> { System.out.println("Stars edited: "+event.getNewValue()); }); grid.addColumn(SimplePojo::getStars, ratingStarsRenderer).setCaption("Rating"); MyStringToIntegerConverter myConverter = new MyStringToIntegerConverter(); SimpleSelectRenderer<SimplePojo,Integer> choiceFieldRenderer = new SimpleSelectRenderer<>(SimplePojo::setChoice, Arrays.asList(1,2,3,4,5)); choiceFieldRenderer.setConverter(myConverter); choiceFieldRenderer.addItemEditListener(event -> { System.out.println("Choice edited: "+event.getNewValue()); }); grid.addColumn(SimplePojo::getChoice, choiceFieldRenderer).setCaption("Choice");
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Version 2.7.0
- Rebuild not log warnings on deprecated listener use
- Fixed DateFieldRenderer, which has been broken since Vaadin 8.9.0
- Requires Vaadin 8.12.0 or newer
- Released
- 2021-03-18
- Maturity
- STABLE
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 8.10+
- Vaadin 8.3+ in 2.6.1
- Vaadin 7.7+ in 1.2.4
- Vaadin 8.2+ in 2.4.0
- Vaadin 8.1+ in 2.2.5
- Vaadin 7.6+ in 1.2.2
- Vaadin 7.5+ in 0.91
- Browser
- Firefox
- Opera
- Safari
- Google Chrome
- iOS Browser
- Android Browser
- Internet Explorer
- Windows Phone
- Microsoft Edge