Dynamic Styles for Gwt Celltable Cells

Dynamic styles for GWT cellTable cells

I haven't checked but most probably the opening of the cell has already been generated by the time getValue is called, so setCellStyleNames will only apply to the remaining cells in the column.

The right way to do it is to override getCellStyleNames of the column to return the CSS class name or not depending on the cell value.

---

BTW, you can then extend IdentityColumn as the getValue then becomes trivial.

Change the style of a GWT CellTable dynamically, to visually mark it as disabled

There is no way to change the style resource directly at runtime.

I see two solutions:

Custom CellTableBuilder

With this solution the Style used by the CellTableBuilder is replaced at runtime, when the table is re-drawn the new style will be applied. This solution has an issue, the CellTable don't use the CellTableBuilder to set selection styles, therefore replacing style on the builder has no effect on the selection style.

Here a demo of the custom CellTableBuilder solution with the source code.

Style Proxy

A different solution is to proxy the Style used by the CellTable and the builder. At runtime you can change the effective Style used by the proxy. Because the DefaultCellTableBuilder stores the style values at construction time you need to create a custom one that don't cache it. I've found no issues, but I've not deeply tested it

Here a demo of the style proxy solution with the source code.

How to style a Row of CellTable when user click on a Cell (GWT)?

Do not redraw the table after you set a style to the row element. Your style will be lost.

Append custom style to a GWT CellTable (in this case all cells)

CellTables have their own CssResource. To override this style applied to all cells in a cellTable, create a new css file :

/* Incremental changes from CellTable.css */ 
.cellTableCell {
  white-space: nowrap;
}

Then create your own CellTable.Resources interface :

public interface TableResources extends CellTable.Resources {

    /**
       * The styles applied to the table.
       */
    interface TableStyle extends CellTable.Style {
    }

    @Override
    @Source({ CellTable.Style.DEFAULT_CSS, "MyOwnCellTableStyleSheet.css" })
    TableStyle cellTableStyle();

}

Finally, when creating your cellTable, use the constructor that lets you specify which Resources to use

CellTable<Object> myCellTable = new CellTable<Object>(15, GWT.create(TableResources.class));

For a working example, look at the Expenses sample provided in the GWT SDK.

GWT CellTable Styling

You just need to remove the gwt- prefix from each class name.

There is also one more problem: there is no cellTable class (the first in your file). Maybe you meant cellTableWidget which is applied to the <table> element:

.cellTableWidget {
    color: #00ff00;
    background-color: #ff00ff;
}
.cellTableHeader {
    color: #00ff00;
    background-color: #ff00ff;
}
...

GWT celltable. How to set cell css style after changing value in EditTextCell

You're very close.

Override getCellStyleNames in the new Column() {} is the first half of the solution.

The second half:

yourColumn.setFieldUpdater(new FieldUpdater<DataType, String>() {

            @Override
            public void update(int index, DataType object, String value) {
                // the following line will apply the correct css
                // based on the current cell value 
                cellTable.redrawRow(index);
            }
});

Hope this would help!

---

The following code is a trivia but complete example.

A celltable with two column is defined. Each cell in the first column displays a simple question. Each cell in the second column is an editable cell which allows you to enter you answer to the question shown in first column. If your answer is correct, then the text of the answer will be styled as bold and black. Otherwise, the text will be styled as red in normal font weight.

Source code of the trivia GWT app:

import com.google.gwt.cell.client.Cell;
import com.google.gwt.cell.client.EditTextCell;
import com.google.gwt.cell.client.FieldUpdater;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.Column;
import com.google.gwt.user.cellview.client.TextColumn;
import com.google.gwt.user.client.ui.RootPanel;

import java.util.Arrays;
import java.util.List;

public class CellTableExample implements EntryPoint {

    private static class Question {

        private final String question;
        private final String correctAnswer;
        private String userProvidedAnswer;

        public Question(String question, String correctAnswer) {
            this.question = question;
            this.correctAnswer = correctAnswer;
            this.userProvidedAnswer = "";
        }

        public String getQuestion() {
            return question;
        }

        public String getCorrectAnswer() {
            return correctAnswer;
        }

        public String getUserProvidedAnswer() {
            return userProvidedAnswer;
        }

        public void setUserProvidedAnswer(String userProvidedAnswer) {
            this.userProvidedAnswer = userProvidedAnswer;
        }
    }

    private static final List<Question> questionList = Arrays.asList(
            new Question("Which city is capital of England?", "London"),
            new Question("Which city is capital of Japan?", "Tokyo"));

    @Override
    public void onModuleLoad() {

        final CellTable<Question> cellTable = new CellTable<>();

        TextColumn<Question> questionCol = new TextColumn<Question>() {
            @Override
            public String getValue(Question object) {
                return object.getQuestion();
            }
        };

        Column<Question, String> ansCol = new Column<Question, String>(new EditTextCell()) {

            @Override
            public String getValue(Question object) {
                return object.getUserProvidedAnswer();
            }

            @Override
            public String getCellStyleNames(Cell.Context context, Question object) {
                if (object.getUserProvidedAnswer().equalsIgnoreCase(object.getCorrectAnswer())) {
                    return "correct-answer";
                } else {
                    return "wrong-answer";
                }
            }

        };

        ansCol.setFieldUpdater(new FieldUpdater<Question, String>() {
            @Override
            public void update(int index, Question object, String value) {
                object.setUserProvidedAnswer(value);
                cellTable.redrawRow(index);
            }
        });

        cellTable.addColumn(questionCol, "Question");
        cellTable.addColumn(ansCol, "Your Answer");

        cellTable.setRowData(0, questionList);

        RootPanel.get().add(cellTable);

    }
}

Companion css file:

.correct-answer {
    font-weight: bold;
    color: black;
}

.wrong-answer {
    font-weight: normal;
    color: red;
}

Screenshot1: Right after the app started. The column of answers was empty.

Screenshot2: After I entered answers. Apparently I answered the first one correctly but not the second one.

How to style the cell that is the intersection of row and column in celltable (GWT)?

Find my post her How to style specific cells in CellTable depending the value of that cell (GWT)?.

This will solve your problem.

Use below code in AbstractCell

        ...
        FontWeight weight = FontWeight.BOLD;
        if (context.getColumn()==0 || (context.getIndex()==1 && context.getColumn()==2)) {
            weight = FontWeight.NORMAL;
        }
        ...

GWT - celltable listbox dynamic contents

AFAIK the CellWidgets don't provide a cell type that supports dynamic lists out of the box.

However you can implement your own custom cell by deriving from AbstractCell and implement the functionality yourself. See the GWT docs for more infos.

I would try to avoid making backend calls from inside the custom cell.
If possible try to add the list of available types in your DTO and then access that property from the render method. Something along these lines:

public class DynamicSelectionCell extends AbstractCell<MyDTO> {

    @Override
    public void render(Context context, MyDTO value, SafeHtmlBuilder sb) {

      if (value == null) {
        return;
      }
       // render a selectionbox and dynamically add options by accessing the value.getAvailablOptions() 
    }
  }

Add a getter to your MyDTO object that returns the available types (Honda, etc) for the specific record and in the render method you just create a selectionbox.

You can check out the code for the SelectionCell how to properly render it.

Regarding the event handling you have to implement onBrowserEvent. See here for more details.

---

Related Topics