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.
Related
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;
}
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 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 }
How can i have Grid with cell which can act as container in GXT 3 so that they can hold any object from other container to any widget.
I'm working on small app which has row expander grid. GXT demo has good example of it.
From class hierarchy it was clear that Grid cells are Cell interface which allows for using render() method so I can add any html code that can displayed in it.
But i wanted to create a cell widget which can have add() method for allowing to add other widgets such as ContentPanel to any other widget
Any suggestion ?
This is the code i wrote. Not a perfect one, but does the work.
public class MyRowExpander extends
RowExpander<GridModel> {
public MyRowExpander (
IdentityValueProvider<GridModel> valueProvider,
AbstractCell<GridModel> contentCell) {
super(valueProvider, contentCell);
}
#Override
protected boolean beforeExpand(GridModel model, Element body,
XElement row, int rowIndex) {
super.beforeExpand(model, body, row, rowIndex);
BeforeExpandItemEvent<GridModel> e = new BeforeExpandItemEvent<GridModel>(
model);
if (!e.isCancelled()) {
if (body.hasChildNodes())
body.removeChild(body.getChild(0));
body.setInnerText("");
Widget customWidget = getWidget(model);
body.appendChild(customWidget.getElement());
ComponentHelper.doAttach(customWidget);
return true;
}
return false;
}
I wondered if anyone knew whether it was possible to remove the '+' Sign that appears next to the root item in a GWT Tree? I didn't see a CSS rule to handle it. Can one replace the + sign with say, a GIF?
(Adapted code from GWT manual below, for illustrative purposes)
TreeItem root = new TreeItem("root"); // Wish to remove + sign from next to this item
root.addItem("item0");
root.addItem("item1");
root.addItem("item2");
root.setState(true, true);
// Add a CheckBox to the tree
TreeItem item = new TreeItem(new CheckBox("item3"));
root.addItem(item);
Tree t = new Tree();
t.addItem(root);
// Add it to the root panel.
RootPanel.get().add(t);
CSS styling does not apply to this at all. Rather, it requires using a different constructor for tree.. If you set spacer.png to a 1x1 transparent PNG it will remove the + signs. Here is the full code I used.
The correct way to do it is as follows:
public interface MyResources extends ClientBundle {
public static final MyResources INSTANCE = GWT.create(MyResources.class);
#Source("spacer.png")
public ImageResource leaf();
}
public class TreeImagesExample implements Tree.Resources
{
#Override
public ImageResource treeClosed() {
// TODO Auto-generated method stub
return MyResources.INSTANCE.leaf();
}
#Override
public ImageResource treeLeaf() {
// TODO Auto-generated method stub
return MyResources.INSTANCE.leaf();
}
#Override
public ImageResource treeOpen() {
// TODO Auto-generated method stub
return MyResources.INSTANCE.leaf();
}
}
Main Function:
TreeImagesExample tx= new TreeImagesExample();
Tree t = new Tree(tx);
t.addItem(root);
For this to work properly, we will also need a SelectionHandler, of course, so that we can register tree clicks on the tree items rather than the (now non-existent) + signs.
You'll have to use CSS to override the plus icon image, which is set as the background image of the item with a left-margin to move the text off of it.
The root item doesn't have its own specific style so you'll have to add a style name (i.e., CSS class) on the tree item yourself and remove the background image yourself, in CSS.