How to set alignment in Grid.

Vaadin 6 / 7 / 8
1

Hi guys,

Im trying to use Grid Component and was wondering on how to align data for each column. do anyone have a solution for this?

Thank you.

2

You can do it with a CellStyleGenerator shown in the Sampler:
http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/features
. I copied the relevant parts of the sample below:

Java:

// Use a custom style for the number cells to align the text to right sample.setCellStyleGenerator(new CellStyleGenerator() { @Override public String getStyle(CellReference cellReference) { if (cellReference.getPropertyId().toString().contains("H")) { return "align-right"; } return null; } }); CSS:

.align-right { text-align: right; } Note that this code does right align on all columns starting on the letter ‘H’. Replace the “contains” with a comparison to the name of the column if you just want to align one column.

3

Hi Jens, Thank you… it works.

one more question, If you wont mind. Im using GridUtil add-on to add buttons with Grid. How to do I align it to MIDDLE.Center?

here’s my code.

Grid grid = new Grid();
grid.setSizeFull();
grid.setSelectionMode(Grid.SelectionMode.SINGLE);
grid.setImmediate(true);

grid.addColumn("col 1", String.class);
grid.addColumn("col 2", String.class);
grid.addColumn("remove", String.class);

grid.addRow("jason williams", "sacramento kings", "");
grid.addRow("michael jordan", "chicago bulls", "");

Button button = new Button("ADD ROW");
button.addClickListener((Button.ClickEvent event) -> {
    grid.addRow("new", "row", "");
});
addComponent(button);

grid.getColumn("remove")
    .setRenderer(new DeleteButtonValueRenderer((ClickableRenderer.RendererClickEvent event) -> {
    Notification.show("Delete "+event.getItemId(), Notification.Type.HUMANIZED_MESSAGE);
    grid.getContainerDataSource().removeItem(event.getItemId());
})).setWidth(100);

grid.setCellStyleGenerator((Grid.CellReference cellReference) -> {
    if(cellReference.getPropertyId().toString().equals("remove")){
        return "align-right";
    } else {
        return null;
    }
});

addComponent(grid);
4

I haven’t used GridUtil but in CSS, to center align something, you would use text-align: center. .align-center { text-align: center; } align-center can be called whatever you want, but I guess that name is a good suggestion.

5

Thanks…

6

Hi,

I’m trying to do the same, but the answer doesn’t fit well for me …

I have standard rules to align columns (right for numeric, center for boolean, etc …)

Doing a CSS style generator to apply CSS class on each cell is maybe a little tricky … In addition, the cellStyleGenerator constrain me to parse and detect for each cell against once by column …

Doing this method today will be another constraint because if one day i need to really apply cell specific style (color, etc …) i need to extend again and again the align generator … It’s not a very standard way …

No way to do the old and efficient column.setAlignment() ???

7

Sorry for the late reaction, but had the same problem, so after some reserach I came up with:

[font=courier new]
/**
* Creates and returns a CellStyle generator to right align numbers.
* @return the created CellStyleGenerator
*/
public static Grid.CellStyleGenerator createNumberStyleGenerator() {

    // define our own style generator
    return new Grid.CellStyleGenerator() {
        @Override
        public String getStyle(Grid.CellReference cellReference) {
            Class<?> type = cellReference.getProperty().getType();
            if (type.isAssignableFrom(Long.class) ||
                type.isAssignableFrom(Integer.class) ||
                type.isAssignableFrom(Double.class)
            ) {
                return ThemeUtil.ALIGN_RIGHT;
            } else {
                return null;
            }
        }
    };
}

[/font]

8

You only need to check if the type is a subclass of
Number
. Secondly the logic needs to be reversed:

    public static Grid.CellStyleGenerator createNumberStyleGenerator() {

        // define our own style generator
        return new Grid.CellStyleGenerator() {
            @Override
            public String getStyle(Grid.CellReference cellReference) {
                if (Number.class.isAssignableFrom(cellReference.getProperty().getType())) {
                    return ThemeUtil.ALIGN_RIGHT;
                } else {
                    return null;
                }
            }
        };
    }
9

In Vaadin 8 the following works:

Column.setStyleGenerator(item -> "v-align-right");
Column.setStyleGenerator(item -> "v-align-left");
Column.setStyleGenerator(item -> "v-align-center");
10

Thanks for the Vaadin 8 info. That worked perfectly!

I am also looking to center the text in the column header and the footer. The above worked fine for the table contents but the column title is still left aligned (see image). What is the best way to do that in Vaadin 8?

Thanks,
Steve
32211.png

11

I got it to work for the Footer but still having issues with the header.

I opened a new ticket for this → https://vaadin.com/forum#!/thread/15655106

12

Does anybody know how to do the same for vertical alignment? I tried .setStyleGenerator(item -> "v-align-middle") but it seems other rules got precedence over this one.

13

The following works, if yout set the

line-height

 also…

.setStyleGenerator(item -> "v-align-middle")
14

Steven Zaluk:
I got it to work for the Footer but still having issues with the header.

I opened a new ticket for this → https://vaadin.com/forum#!/thread/15655106

can you share how you got it right align in the footer? Thanks!

15

Hi Karl,

somehow the GridCellStyleGenerator is not called for the footerrow (talking about Vaadin7), seems a bug to me.
To solve this I just subclassed my Grid and overwrote appendFooterRow()

  @Override
  public FooterRow appendFooterRow()
  {
    FooterRow result = super.appendFooterRow();
    for (Object propertyId : getContainerDataSource().getContainerPropertyIds())
      if (Number.class.isAssignableFrom(getContainerDataSource().getType(propertyId)))
          result.getCell(propertyId).setStyleName("align-right");
    return result;
  }

All your columns must be created before calling this method.