Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8

Grid Editor UI question

Jose Cuadra
6 years ago Dec 17, 2015 8:05pm

Hi guys,

Currently I'm developing a webapp using Vaadin 7.5 and I stumbled across and issue I have not been able to solve by reading this community or other online sources. My problem as follows...

I have applied the editor  UI to my grid, via the myGrid.setEditorEnabled(true). As for now, I know how to change the Save and Cancel captions, but I have not been able to do much else. 

For example, on my Grid I have formatted some dates to appear as "2015-Dec-16" by using the DateRenderer. But once I double click on the editor, I lose temporarily that format while editing. This happens not only for dates, but any other format. 

Could you guys shed a light on my issue? I appreciate your help very much.

Thanks!,
Jose Cuadra

Olli Tietäväinen
6 years ago Dec 18, 2015 2:01pm

Hi Jose!

The Renderer doesn't affect the Editor, as you have noticed. You need to set an editor Field to the column instead. In the case of a date you want formatted, you can use the DateField, which can take a date format like DateRenderer.

Sample code:

grid.setEditorEnabled(true);

        Column dobColumn = grid.getColumn("dateOfBirth");
        dobColumn.setRenderer(
                new DateRenderer(new SimpleDateFormat("yyyy-MMM-dd")));
        DateField df = new DateField();
        df.setDateFormat("yyyy-MMM-dd");
        dobColumn.setEditorField(df);

You could also use PopupDateField; see more information about date editing Fields here: https://vaadin.com/book/-/page/components.datefield.html

Documentation regarding Fields: https://vaadin.com/book/-/page/components.fields.html

A Wiki article about creating a completely custom Field:
https://vaadin.com/wiki/-/wiki/Main/Creating+a+custom+field+for+editing+the+address+of+a+person

You can also see the very simple demo app here:
https://github.com/OlliTietavainenVaadin/GridDemo

Best regards,

Olli Tietäväinen
Vaadin Developer