Thursday, March 27, 2014

How to style ClickableTextCell Column that was rendered as Image Column (GWT)?

I want to have an Image Column in Celltable. I don't want to use ImageResource to do that cos it got problem with the Location of Image & I can't use setFieldUpdater. So i used "ClickableTextCell Column that was rendered as Image Column" like the following:

     String[] msg={"12","love","image/icon/delete.jpg"}       Column<String[], String> deleteColumn=new Column<String[], String>(new ClickableTextCell(){                public void render(Context context,                       SafeHtml value,                       SafeHtmlBuilder sb)               {                    sb.appendHtmlConstant("<img width=\"20\" src=\""                                          + value.asString() + "\">");               }         }){                @Override              public String getValue(String[] object) {                  // TODO Auto-generated method stub                  return object[3];              }         };         deleteColumn.setCellStyleNames(getView().getRes().css().gwtCellImage());  

in css:

.gwtCellImage button{        background-image:url('/images/icon/delete.png');      }  .gwtCellImage button:hover{        background-image:url('/images/icon/deleteRed.png');   }      .gwtCellImage button, .gwtCellImage button:hover{      width:16px;      height:16px;      background-size:contain;      background-position:center;      background-repeat:no-repeat;  }  

The deleteColumn showed Image but when I mouse over it the image did not turn to Red?

So I think i did something wrong?

Can you show me how to fix it?

(Also: http://stackoverflow.com/questions/22694926/how-to-style-clickabletextcell-column-that-was-rendered-as-image-column-gwt)


--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment