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

Question

Base on user's entry in editable cell I would like to display concrete style. What I am trying to do is a very base validation.

I've tried already override getCellStyleNames in Anonymous new Column() {}, but this work on start, base on model values, but what would work, after user change value of that cell?

Please help.

Answer 1

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.

Answer 2

Use setCellStyleNames inside the render method:

Column<MyType, String> testColumn = new Column<MyType, String>(new EditTextCell()) {
    @Override
    public String getValue(MyType object) {
        return object.getValue();
    }

    @Override
    public void render(Context context, MyType object, SafeHtmlBuilder sb) {
        if(object.isValid())
            setCellStyleNames("validStyleNames");
        else
            setCellStyleNames("invalidStyleNames");

        super.render(context, object, sb);
    }
};

Answer 3

Correct aproach is to overide getCellStyleNames method in anonymous class:

new Column<Model, String>(new EditTextCell())

You have to return string name of css class.