How to Style ButtonCell in CellTable Gwt?

Question

How to Style ButtonCell in CellTable Gwt?

I searched on internet & found 2 solutions:

-Solution 1: use urColumn.setCelLStyleNames("yourStyleName"); (Adding style to a ButtonCell)

ButtonCell nextStepButton=new ButtonCell();
Column<String[], String> nextStepColumn = new Column<String[], String>(nextStepButton) {

        @Override
        public String getValue(String[] oneOrder) {
            return oneOrder[11];
        }
};
nextStepColumn.setCellStyleNames(getView().getRes().css().buttonCell());

in CSS

.gwtButton, .buttonCell.getButton {
  margin: 0;
  padding: 5px 7px;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  font-size:small;
  background: black;
  border:1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
  border-radius: 3px;
 -moz-border-radius: 3px;
  color: white;

}

I tried but nothing happened.

-Solution2: modify ButtonCell (https://code.google.com/p/google-web-toolkit/issues/detail?id=7044)

               ButtonCell nextStepButton=new ButtonCell(){
                    // A native button cell doesn't have the gwt-button class, which makes it
                      // look weird next to other gwt buttons. Fix that here.
                      @Override
                      public void render(
                          final Context context,
                          final SafeHtml data,
                          final SafeHtmlBuilder sb) {
                        sb.appendHtmlConstant("<button type=\"button\" class=\"gwt-Button\" tabindex=\"-1\">");
                        if (data != null) {
                          sb.append(data);
                        }
                        sb.appendHtmlConstant("</button>");
                      }
                };

for the solution2, i can see the difference (ie the Style of ButtonCell got changed). However, I don't have "gwt-Button" css class but only have "gwtButton" css class (see the above css). However, when I change "gwt-Button" to "gwtButton" in the the 2nd code sb.appendHtmlConstant("<button type=\"button\" class=\"gwtButton\" tabindex=\"-1\">"); then nothing happened.

So, How to style Button cell so that it can pick up the gwtButton css class

Answer 1

What worked for me was creating a custom Button Cell class (say, StyledButtonCell for e.g.) that extends ButtonCell, and overrode the render method to my liking. In my example below, I specify a basic bootstrap button style and also use an additional icon to go with the button text.

Sample code for custom button cell class (derived from base ButtonCell class):

public class StyledButtonCell extends ButtonCell{
/**
   * Construct a new StyledButtonCell that will use a {@link SimpleSafeHtmlRenderer}.
   */
  public StyledButtonCell() {
    super(SimpleSafeHtmlRenderer.getInstance());
  }

  @Override
  public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
    sb.appendHtmlConstant("<button class=\"btn btn-default\" type=\"button\" tabindex=\"-1\">");
    sb.appendHtmlConstant("<i class=\"fa fa-refresh\"></i>");
    if (data != null) {
      sb.append(data);
    }
    sb.appendHtmlConstant("</button>");
  }

}

Sample reference to the StyledButtonCell while defining gwt table/columns:

... new Column<XYZClass, String>(new StyledButtonCell()) {
        @Override
        public String getValue(XYZClass object) {
            return "buttonText_goes_here";
        }

Answer 2

If the code posted is what you have in your page, you have an error in the selector, unless you did a mistake when copying to your question.

• try changing .buttonCell.getButton with .buttonCell.gwtButton
• or change .buttonCell.getButton with just .gwtButton

[EDITED]

Ok, I see the error, you are setting the style to the container of the button, so you have to change your selector. Use this one in your css resource:

.gwtButton button {
  margin: 0;
  padding: 5px 7px;
  ...
}