Why deprecate Column.setClassNameGenerator in 24.5.0?

Flow
1

After upgrading to vaadin 24.5.0.alpha1 I saw that Column.setClassNameGenerator is deprecated and Column.setPartNameGenerator should be used instead.

Is there a reason why we can’t have both?

I often use setClassNameGenerator to give the cell specific attributes like “no-padding” or “background”, also often combining them. Assigning these “attributes” via a part feels not right because part should only be one value and not multiple. A class is a better use case for this so I would love to keep this method.

2

Using part names has the benefit over using class names in that you don’t need to use shadow DOM styling / style injection to style the cells.

Instead, you can style the parts in your application theme with:

vaadin-grid::part(my-style-name) {
  background-color: lightblue;
}

It’s still possible to use shadow DOM styling with part names also if you change the selectors from .my-style-name to [part~=my-style-name].

[part~='my-style-name'] {
  background-color: lightblue;
}
3

would this also be then possible? :

Column.setPartNameGenerator(e -> "no-padding background")

with the styles:

vaadin-grid::part(no-padding) {
   padding:0
}
vaadin-grid::part(background) {
   background-color:var(--lumo-primary-color)
}
4

The background style would work fine like that.

The cell paddings in the grid are not on the cell elements directly however so you need to use the --vaadin-grid-cell-padding CSS variable for it:

vaadin-grid::part(no-padding) {
  --vaadin-grid-cell-padding: 0;
}
5

Is there an alternative to removing the CSS part names applied by setPartNameGenerator as there was removeClassName?

6

Not directly.

The part names are fetched in a reactive manner, when the respective grid or row is loaded (e.g. due to scrolling or a refresh). Thus the callback has to decide which part names are to be provided.

7

I understand, in my case I want to give a style to the column of my grid where the cell focus is located, if I change the column I should remove the style from the column and give it to the new column. Is that possible?

8

In Java I guess the easiest way is to utilize cell focus listener. With that you get the respective column, where the focus event happend. That info you can then use in the part name generator to add an additional name like “focused-column” or so and refresh the grid.

If that is no option due to a “heavy” backend, the alternative would be to do in in the client utilizing JavaScript and the underlying html table of the grid.

9

I have already implemented the mechanism to give a new CSS part (“focused-column”) to the column in the addCellFocusListener and it works ok. But when selecting another column I must remove the CSS part given to the previous column to give it to the new column and I don’t have mechanisms for that, right?

10

In theory you have to refresh the grid. But since I do not know your code, it’s hard to tell for sure.