123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182 |
- ---
- title: Formatting Data In Grid
- order: 24
- layout: page
- ---
-
- [[formatting-data-in-grid]]
- = Formatting data in grid
-
- Without any special configuration, Grid tries to find a `Converter` for
- converting the property value into a String that can be shown in the
- browser. The `ConverterFactory` configured for the session is used for
- this purpose. If no compatible converter is found, Grid will instead
- fall back to using `toString()` on the property value.
-
- [[cellstylegenerator]]
- CellStyleGenerator
- ^^^^^^^^^^^^^^^^^^
-
- Grid does also provide a couple of mechanisms for fine-tuning how the
- data is displayed. The simplest way of controlling the data output is to
- use a `CellStyleGenerator` to add custom stylenames to individual cells,
- thus affecting which CSS rules from the theme are applied to each cell.
-
- [source,java]
- ....
- grid.setCellStyleGenerator(new CellStyleGenerator() {
- @Override
- public String getStyle(CellReference cellReference) {
- if ("amount".equals(cellReference.getPropertyId())) {
- Double value = (Double) cellReference.getValue();
- if (value.doubleValue() == Math.round(value.doubleValue())) {
- return "integer";
- }
- }
- return null;
- }
- });
-
- getPage().getStyles().add(".integer { color: blue; }");
- ....
-
- We have not yet defined any `Converter` or `Renderer` in this example. This
- means that Grid will use a `StringToDoubleConverter` to convert the Double
- values from the data source into Strings that are sent to the browser
- and displayed in each cell.
-
- To keep this example as simple as possible, we are dynamically injecting
- new CSS styles into the page. In a real application, it's recommended to
- instead add the styles to the theme since that helps with separation of
- concerns.
-
- [[renderer]]
- Renderer
- ^^^^^^^^
-
- The next thing you can do to control how the data is displayed is to use
- a `Renderer`. The `Renderer` will receive the value from the data source
- property, possibly after it has been converted to the `Renderer`{empty}'s input
- type using a `Converter`. The `Renderer` is will then make sure the value
- gets show in an appropriate way in the browser. A simple renderer might
- just show the data as text, but there are also more complex `Renderer`{empty}s
- that e.g. show a numerical value as a progress bar.
-
- Will will use a `NumberRenderer` using a currency format to render the
- cell values for the `Amount` column. To do this, we simply create and
- configure it and then set it as the `Renderer` for the designated column.
- No `Converter` will be used in this case since `NumberRenderer` already
- knows ho to handle values of the type Double.
-
- [source,java]
- ....
- NumberFormat poundformat = NumberFormat.getCurrencyInstance(Locale.UK);
- NumberRenderer poundRenderer = new NumberRenderer(poundformat);
- grid.getColumn("amount").setRenderer(poundRenderer);
- ....
-
- [[converter]]
- Converter
- ^^^^^^^^^
-
- The last way of controlling how data is displayed is to use a `Converter`.
- The framework will in most cases find and use a suitable `Converter`, but
- you can also supply your own if the default conversion is not what you
- need. The following example uses a custom `Converter` for the `Count` column
- to change the value into HTML strings with different HTML for even and
- odd counts. Grid will by default protect you from cross-site scripting
- vulnerabilities by not interpreting HTML in cell values. This can be
- overridden by setting the column to use a `HtmlRenderer` instead of the
- default `TextRenderer`. Both those renderers expect String values. Since
- we will not be editing any values, the Converter doesn't need to support
- changing the HTML strings back into integers.
-
- [source,java]
- ....
- grid.getColumn("count").setConverter(new StringToIntegerConverter() {
- @Override
- public String convertToPresentation(Integer value, Class<? extends String> targetType, Locale locale)
- throws Converter.ConversionException {
- String stringRepresentation = super.convertToPresentation(value, targetType, locale);
- if (value.intValue() % 2 == 0) {
- return "<strong>" + stringRepresentation + "</strong>";
- } else {
- return "<em>" + stringRepresentation + "</em>";
- }
- }
- });
-
- grid.getColumn("count").setRenderer(new HtmlRenderer());
- ....
-
- [[full-example]]
- Full example
- ^^^^^^^^^^^^
-
- Putting all these pieces together, we end up with this class that uses
- the same data as in the <<UsingGridWithAContainer#using-with-a-container,Using
- Grid with a Container>> example.
-
- [source,java]
- ....
- import java.text.NumberFormat;
- import java.util.Locale;
-
- import com.vaadin.annotations.Theme;
- import com.vaadin.data.util.converter.Converter;
- import com.vaadin.data.util.converter.StringToIntegerConverter;
- import com.vaadin.server.VaadinRequest;
- import com.vaadin.ui.Grid;
- import com.vaadin.ui.Grid.CellReference;
- import com.vaadin.ui.Grid.CellStyleGenerator;
- import com.vaadin.ui.UI;
- import com.vaadin.ui.renderers.HtmlRenderer;
- import com.vaadin.ui.renderers.NumberRenderer;
-
- @Theme("valo")
- public class FormattingDataInGrid extends UI {
-
- @Override
- protected void init(VaadinRequest request) {
- Grid grid = new Grid(GridExampleHelper.createContainer());
-
- setContent(grid);
-
- grid.setCellStyleGenerator(new CellStyleGenerator() {
- @Override
- public String getStyle(CellReference cellReference) {
- if ("amount".equals(cellReference.getPropertyId())) {
- Double value = (Double) cellReference.getValue();
- if (value.doubleValue() == Math.round(value.doubleValue())) {
- return "integer";
- }
- }
- return null;
- }
- });
-
- getPage().getStyles().add(".integer { color: blue; }");
-
- NumberFormat poundformat = NumberFormat.getCurrencyInstance(Locale.UK);
- NumberRenderer poundRenderer = new NumberRenderer(poundformat);
- grid.getColumn("amount").setRenderer(poundRenderer);
-
- grid.getColumn("count").setConverter(new StringToIntegerConverter() {
- @Override
- public String convertToPresentation(Integer value,
- Class<? extends String> targetType, Locale locale)
- throws Converter.ConversionException {
- String stringRepresentation = super.convertToPresentation(
- value, targetType, locale);
- if (value.intValue() % 2 == 0) {
- return "<strong>" + stringRepresentation + "</strong>";
- } else {
- return "<em>" + stringRepresentation + "</em>";
- }
- }
- });
-
- grid.getColumn("count").setRenderer(new HtmlRenderer());
- }
- }
- ....
|