logo
down
shadow

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


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

By : arturo rodriguez
Date : November 28 2020, 11:01 PM
I wish did fix the issue. You're very close.
Override getCellStyleNames in the new Column() {} is the first half of the solution.
code :
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);
            }
});
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);

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

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


Share : facebook icon twitter icon
How to style specific cells in CellTable depending the value of that cell (GWT)?

How to style specific cells in CellTable depending the value of that cell (GWT)?


By : alfasign
Date : March 29 2020, 07:55 AM
With these it helps You can try it be extending AbstractCell also.
Read here about Implementing the render() Method.
code :
static class BoldCell extends AbstractCell<String> {

    /**
     * The HTML templates used to render the cell.
     */
    interface Templates extends SafeHtmlTemplates {
        @SafeHtmlTemplates.Template("<div style=\"{0}\">{1}</div>")
        SafeHtml cell(SafeStyles styles, SafeHtml value);
    }

    /**
     * Create a singleton instance of the templates used to render the cell.
     */
    private static Templates templates = GWT.create(Templates.class);

    @Override
    public void render(Context context, String value, SafeHtmlBuilder sb) {
        /*
         * Always do a null check on the value. Cell widgets can pass null to cells if the
         * underlying data contains a null, or if the data arrives out of order.
         */
        if (value == null) {
            return;
        }

        // If the value comes from the user, we escape it to avoid XSS attacks.
        SafeHtml safeValue = SafeHtmlUtils.fromString(value);

        // Use the template to create the Cell's html.
        FontWeight weight = FontWeight.NORMAL;
        if (safeValue.asString().equals("898")) {
            weight = FontWeight.BOLD;
        }
        SafeStyles styles = SafeStylesUtils.forFontWeight(weight);
        SafeHtml rendered = templates.cell(styles, safeValue);
        sb.append(rendered);
    }
}
        ...
        FontWeight weight = FontWeight.NORMAL;
        if (context.getIndex()==2) {
            weight = FontWeight.BOLD;
        }
        ...
    Cell<String> cell = new BoldCell();

    Column<Contact, String> nameColumn = new Column<Contact, String>(cell) {
        @Override
        public String getValue(Contact object) {
            return object.name;
        }
    };
    table.addColumn(nameColumn, "Name");
How to style the cell that is the intersection of row and column in celltable (GWT)?

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


By : Michał Grodecki
Date : March 29 2020, 07:55 AM
This might help you Find my post her How to style specific cells in CellTable depending the value of that cell (GWT)?.
This will solve your problem.
code :
        ...
        FontWeight weight = FontWeight.BOLD;
        if (context.getColumn()==0 || (context.getIndex()==1 && context.getColumn()==2)) {
            weight = FontWeight.NORMAL;
        }
        ...
How to style a Row of CellTable when user click on a Cell (GWT)?

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


By : Racbel Lee
Date : March 29 2020, 07:55 AM
like below fixes the issue Do not redraw the table after you set a style to the row element. Your style will be lost.
GWT EditTextCell : How to increase editable TextBox width in EditTextCell?

GWT EditTextCell : How to increase editable TextBox width in EditTextCell?


By : 桂柯易
Date : March 29 2020, 07:55 AM
seems to work fine I am using GWT2.3 in my project. I want to increase editableTextBox width when user click on editableTextCell. Problem is My Column width is 200 Px. when user clicks on editableTextCell then that TextBox width is around 125px in EditableTextCell is less as compare to column width. , In my project I do that:
GWT Celltable : How to avoid entering particular value in particular cell of Celltable?

GWT Celltable : How to avoid entering particular value in particular cell of Celltable?


By : Richard
Date : March 29 2020, 07:55 AM
should help you out If you want a specific behavior in a Cell, then you have a to make a Cell with that behavior built in.
You could start with an EditTextCell if that's what you want, and then extend it and override its onBrowserEvent to cancel key events for spaces when in edit mode, or something like that.
Related Posts Related Posts :
shadow
Privacy Policy - Terms - Contact Us © soohba.com