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.

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

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

• Author Homepage
• Issue Tracker
• Source Code - Vaadin 7
• Source Code - Vaadin 8
• Online Demo

Compatibility