I need the Cell Table Column Alignment to be on Right/Center.Is it Possible to do using any GWT CellTable API Method? How to Achieve this?Any suggestion
Here is a good answer how to add a style name to a cell.
Dynamic styles for GWT cellTable cells
A solution can look like this:
t.addColumn(new TextColumn<String>()
{
#Override
public String getValue(String object)
{
return object;
}
#Override
public String getCellStyleNames(Context context, String object)
{
return super.getCellStyleNames(context, object) + " right";
}
});
in your css class add:
.right{
text-align: right;
}
Related
Im set custom CssResource for DataGrid.
First column in table is ordered column with specific style.
So when row is selected i need set another specific style for the order column.
Something like that:
You can override .getCellStyleNames method for your column:
Column<Object, String> numberColumn = new Column<Object, String>(new TextCell()) {
#Override
public String getCellStyleNames(Context context, Object object) {
if (selectionModel.isSelected(object)) {
return "boldStyle";
}
};
Try with AbstractHasData#addCellPreviewHandler().
dataGrid.addCellPreviewHandler(new Handler<T>() {
#Override
public void onCellPreview(CellPreviewEvent<T> event) {
if ("click".equals(event.getNativeEvent().getType())) {
table.getRowElement(event.getIndex()).getCells().getItem(0).getStyle()
.setBackgroundColor("#444444");
}
}
});
Note: This code is for SingleSelectionModel. If you need it for MultiSelectionModel then do same thing for all selected rows.
I created a CellTable with image column in GWT. Image is added through `ImageResource .
private Column<DocList, ImageResource> statusColumn;
private final Resources resources = GWT.create(Resources.class);
final String STATUS_COLUMN = "Status";
statusColumn = buildStatusColumn();
private Column<DocList, ImageResource> buildStatusColumn() {
statusColumn = new Column<DocList, ImageResource>(
new ImageResourceCell()) {
#Override
public ImageResource getValue(DocList object) {
return resources.draft();
}
};
statusColumn.setDataStoreName(STATUS_COLUMN);
return statusColumn;
}
public interface Resources extends ClientBundle {
#Source("draft.png")
ImageResource draft();
}
But the problem is that I want to change some css properties of the image, for example, size or cursor="pointer" for click event, but I don't know how. In Firebug there is a default size.
How to add css to image done by ImageResource in GWT?
Column has a method called getCellStyleName().
You can override this method and return a style that reflects the image you use
#Override
public String getCellStyleName()
{
return resources.draft().getName();
}
Then you could create a style in your sheet like this:
.draft img {
cursor: pointer;
width: ...;
height: ...;
}
I just want to know how would you do, with a GWT CellTable, to replicate the GMail hovered row marker:
I created this classes:
public class MarkerCell extends ImageResourceCell {
#Override
public void render(com.google.gwt.cell.client.Cell.Context context, ImageResource value, SafeHtmlBuilder sb) {
value = Images.INSTANCE.selectedRowMarker();
super.render(context, value, sb);
}
}
public class MarkerColumn<T> extends Column<T, ImageResource> {
public MarkerColumn() {
super(new MarkerCell());
}
#Override
public ImageResource getValue(T object) {
return Images.INSTANCE.selectedRowMarker();
}
}
and i used it in this way:
MarkerColumn<GfsFile> marker = new MarkerColumn<GfsFile>();
marker.setSortable(false);
table.addColumn(marker);
Excluding the hover event handling that should hide/unhide the marker, the result is not quite as i expected:
What approach would you use to get closer to GMail?
I would embed the row marker image as part of the each row and attach a style that sets the opacity to 0. Then add a :hover state to the row selectorClass that sets the opacity to 1. The trick is getting the css selector right. I think cell table uses table rows so it should be something like
tr:hover .selectorImageStyle {opacity:1 }
I need to set up specific styles of Cell Browser cells in GWT from a CSS file. Any pointers on how to do it
If you are using 2.4 or 2.5 sdk of GWT
Override getCellStyleNames() while creating column.
TextColumn<String> col= new TextColumn<String>() {
#Override
public String getCellStyleNames(Context context, String object) {
return "yourStylee";
}
#Override
public String getValue(String object) {
return object.getName();
}
};
};
If its cell
public void render(com.google.gwt.cell.client.Cell.Context context, Meeting object, SafeHtmlBuilder sb) {
sb.append(SafeHtmlUtils.fromString(" <div class=youclass><table>"));
// Code goes here
sb.append(SafeHtmlUtils.fromString("<table> </div>"));
You should be able to set the css style on any widget using methods from UIObject. In this case something like this should work:
cellBrowserInstance.setStylePrimaryName("newStyle");
with "newStyle" being listed in your CSS.
I have created a custom widget, basically an Image and a text label.
What must I do so that I can now set the position of the text ( top/left/bottom of the image for example ) using nothing only CSS? I mean what methods would my class need so that the CSS styling can be applied to it?
ie Can I have a css class like so
.ImageAndLabel
{
imagePosition: top;
}
Heres my gwt class
public class ImageAndLabel extends Composite
{
private Label label = new Label();
private Image img = new Image("/images/pinkBackground.png");
protected final FlexTable contentTable;
public ImageAndLabel()
{
contentTable = new FlexTable();
initWidget(contentTable);
label.getElement().getStyle().setFontSize(40, Unit.PX);
contentTable.setWidget(0,0,img);
img.setHeight("200px");
contentTable.setWidget(0,1,label);
label.getElement().getStyle().setLeft(0, Unit.PX);
img.getElement().setId("popupImg");
label.getElement().setId("popupLabel");
}
public void setText(String text)
{
label.setText(text);
}
}
I guess what I'm after is can I create my own Custom CSS codes?
You can use flextable method for alignment.
example :
flexTable.getFlexCellFormatter().setAlignment(0, 0,
HasHorizontalAlignment.ALIGN_CENTER, HasVerticalAlignment.ALIGN_MIDDLE);