Can a grid column truncate text that is too long?

In Vaadin 8 grids, is it possible to have a column with text fill the available space and truncate the text if it is too long to fit?

To put some more meat on the question:

The Vaadin version is 8.4.1 (I’ll move up to 8.4.3 when I get everything working)

I have a grid with 4 columns:

  1. A Date column
  2. A description column
  3. A numeric value column
  4. A boolean column, rendered as a checkbox (I’m using a lambda converter and an HtmlRenderer for this)

I would like columns 1, 3, and 4 to take the width that’s natural for them, and then I would like column 2 to use the width that is left, and to truncate the text if the text is to long, like so: “Too lon…”

Is this possible to accomplish with the Vaadin 8 grid?

Thanks!

  • Steinar

If there is a simple way to add this CSS to column 2 it might do the trick:

text-overflow: ellipsis;
overflow: hidden;

The [Column.setStyleGenerator()]
(https://vaadin.com/api/com/vaadin/ui/Grid.Column.html#setStyleGenerator-com.vaadin.ui.StyleGenerator-) method has the possibility of adding a custom classname for the column.

But I don’t know where to put the CSS with the class name selector?

Is creating a custom theme for the application the only way to deliver CSS to a Vaadin application?

I managed to add a style generator, and add a style to the Page object, and according to the chrome devtools the <td> elements for the column has the expected CSS class name, and the expected CSS style.

But it still doesn’t work unfortunately.

Here’s what I did:

  1. Added a lambda returning a string constant with the classname as the column’s style generator
        Column<Transaction, ?> name = transactionsTable.getColumn("name").setCaption(transactionTypeName);
        name.setExpandRatio(1).setStyleGenerator(column->"transaction-table-name-column");
  1. Added the style containing the desired elements to the Page’s style in the UI.init() method
@Theme("touchkit")
@Widgetset("org.vaadin.touchkit.gwt.TouchKitWidgetSet")
public class UkelonnUI extends UI { // NOSONAR

    @Override
    protected void init(VaadinRequest request) {
        getPage().setTitle("Ukelønn");
        addTransactionTableNameColumnStyle(getPage());
    }

    private void addTransactionTableNameColumnStyle(Page page) {
        Styles styles = page.getStyles();
        styles.add(".transaction-table-name-column { text-overflow: ellipsis; overflow: hidden;}");
    }
}

According to the chrome development tools a <td> element in the name column looks like this (i.e. it has picked up the class name from my string constant in the lambda):

<td class="v-grid-cell transaction-table-name-column v-grid-cell-focused" role="gridcell" colspan="1" style="height: 21px; width: 156px;">Støvsuging kjeller</td>

and has the following CSS (i.e. the CSS I added to the Page’s style in the UI class has been delivered to the HTML page and has been picked up by the class name added to the <td> element above):

.transaction-table-name-column {
    text-overflow: ellipsis;
    overflow: hidden;
}

But I still get line breaks in the name column (and multiple lines, which breaks up the mobile formatting).

Hi,

Injecting styles method is not the preferred one, you should use that only for hacks that do not absolutely work otherwise. So you could remove this method altogether

private void addTransactionTableNameColumnStyle(Page page) {
	Styles styles = page.getStyles();
	styles.add(".transaction-table-name-column { text-overflow: ellipsis; overflow: hidden;}");
}

And instead put this into your theme .scss files inside your theme mixin.

.transaction-table-name-column {
    text-overflow: ellipsis;
    overflow: hidden;
}

I don’t currently have a mixin theme. I’m not sure how well a mixin theme would work with the TouchKit theme that still is an old style theme based on base…?

Since the injected style is actually picked up and available to the <td> element, will it make any difference if I deliver the CSS in a mixin theme? I.e. will that make the formatting actually work?

(I’m guessing that it won’t make any difference but I would be very happy to be proved wrong…)