Directory

← Back

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.

Author

Contributors

Rating

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");

Compatibility

(Loading compatibility data...)

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

Grid Renderers collection For Vaadin7 - Vaadin Add-on Directory

Collection of 13 Grid Renderers for editing and viewing data plus Keyboard navigation extension for editable renderers for Vaadin 8 and 7. Grid Renderers collection For Vaadin7 - Vaadin Add-on Directory
### 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
Online