does vaadin TextField could display in specific format but return true valu

does vaadin TextField could display in specific format but store true value when use getValue method.


I got USD 1000000

I want textfile usd display 1,000,1000(thousand delimiter), but return 1000000 when I use usd.getValue method to get the value.


there’s no built-in converter for this but you could quite easily build your own by implementing the<PRESENTATION, MODEL> interface. Use String as the presentation format and whatever numeric type for the model format. Then you just need to format the string for the presentation and parse the input to update the model.

Please let me know if you need more help with this.


Dear Tepppo,

Really really great thanks for your idea,I am looking for it quite a long time. Could you simple past some code implementation example of<PRESENTATION, MODEL>? It would be great help. Thanks again.<String,Bigdecimal>, should be this ,right? any implement code example?

You can use the built-in StringToBigDecimalConverter as a base for this, e.g.

        final TextField tf = new TextField();
        tf.setConverter(new StringToBigDecimalConverter() {
            protected NumberFormat getFormat(Locale locale) {
                NumberFormat f = super.getFormat(locale);
                f.setMinimumFractionDigits(2); // Always show 2 fraction digits
                return f;
        tf.setConvertedValue(new BigDecimal("1123")); // Will be shown as 1,123.00

TextField.getValue/setValue are always based on the string that is shown in the field but you can use TextField.getConvertedValue/setConvertedValue to pass the string through the converter and get/set the BigDecimal value

Seems the formate is not correct

tf.getConvertedValue() return 1123.00, no thousand delimiter

GroupingUsed=true should show the delimiter. It also depends on the locale you are using, try setting the TextField locale explicilty and see if that changes


no luck, I try both Local.ENGLISH and Local.US


I implement the class , seems it will run convertToPresentation and then convertToModel.

code work flow as following loigc

  1. convertToPresentation

turn 100000 to 1,000,000 ====> this value could get from getConvertedValue() method

  1. pass 1,000,000 to convertToModel method as parameter

am I understanding right?

a. how to remove delimiter and then return 1000000 in convertToModel
b. if a be solved and return, use what method to get the return value, getValue()