is anyone have idea ,how to add specific style to GWT Datagrid?
I need to add style to specific row ( class="error") to show that row in red color.
More details:
Rendering the table using the GWT Datagrid. it has column called "type" .
the type can have different values like " connected" ,"disconnected" ,"error".
if the type is error then i need to render row with different style( need to show text in the
red color).
There's RowStyles for that exact purpose.
grid.setRowStyles(new RowStyles<Row>() {
#Override
public String getStyleNames(Row row, int rowIndex) {
return "error".equals(row.getType()) ? "error" : "";
}
});
Related
I want to change background color of a cell in GXT Grid, I am using GXT 3.0 .I have got one link which is related to my query( http://ui-programming.blogspot.in/2010/01/gxt-how-to-set-cell-grid-background.html) but setRenderer method is not present columnConfig in GXT 3.0 .How can i get desired output? pLz help.
Code i have done till now:-
ColumnConfig<Stock, Double> changeCol = new ColumnConfig<Stock, Double>(props.change(), 100, "Change");
changeCol.setCell(new AbstractCell<Double>() {
#Override
public void render(Context context, Double value, SafeHtmlBuilder sb) {
if (value == null) {
return;
}
store.get(context.getIndex());
GWT.log(DOM.getCaptureElement().getId());
String style = "style='background-color: " + (value < 0 ? "red" : "green") + "'";
String v = number.format(value);
sb.appendHtmlConstant("<span " + style + " qtitle='Change' qtip='" + v + "'>" + v + "</span>");
}
});
For those that need to change cell colour based on data in the grid, I've just had to do this (GXT 3.1) but unfortunately the solution isn't perfect.
In general, one can do custom cell rendering with ColumnConfig.setCell(MyCell) where 'MyCell' is a subclass of AbstractCell. Unfortunately there is the problem of 'padding' in the host 'div' which isn't coloured. There are a few ways around this...
The simplest way is to:
ColumnConfig.setCellPadding(false)
Render your own coloured divs that fill up the whole cell (with padding if desired)
Unfortunately this doesn't play well with single cell selection (CellSelectionModel). The css class for cell selection is obfuscated so it can't be referenced in other stylesheets. :(
My (ugly) alternative was to render a custom stylesheet that is linked in the module's html page (eg. Main.html). Then I can colour cells using css 'class' instead of 'style' attributes. IE:
Create a custom JSP that renders a stylesheet (content type 'text/css')
Link the stylesheet to the module html (after 'reset.css')
The stylesheet needs to have selector td.someClass (.someClass is not specific enough)
Use Grid.getView().setViewConfig() to supply a GridViewConfig that returns the appropriate class(es)
Unfortunately this requires a good knowledge of CSS rules and also the possible colours need to be known at user login time.
There may be a third way using the style attribute of the 'td' element. Have a look at this issue from Sencha:
http://www.sencha.com/forum/showthread.php?289347-Influencing-cell-td-style-in-a-grid&p=1057079 (work in progress)
Note that other styling options include:
Various ColumnConfig.setXxxClassName()
Various ColumnConfig.setXxxStyle()
I have an cell table and the column data are the check boxes i want align these check boxes to center of that column
i tried withcolumn.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
and using text-align:middle in css. but it doesn't seem to work .Please help
Column<Person, Boolean> checkColumn = new Column<Person, Boolean>(
new CheckboxCell(true, false)) {
#Override
public Boolean getValue(Person object) {
// check box function
}
};
checkColumn.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
Works fine for me.
Since you didn't provide much code I can only make several assumptions:
Check that your cell table CSS [if your using custom ones] isn't over writing the alignment
Double check your aligning the right column [happens]
If you are using UiBinder, check to make sure you only set alignment in either your java class or the xml
When I select a row in a CellTable which contains several columns, the whole row gets colored in yellow. It does not depend on which area of the row I click (which column of the row).
What I try to do is to keep the selected row colored in yellow as long as no other row of this very table is selected. At the moment, as soon as I click somewhere else in the browser, the row gets back its original color.
I tried to use a selection model, but this changed nothing. Do you have any advise or is this simply not possible, since the focus is managed by the browser? The behavior is the same in the Google showcase for the CellTable...
The selection model actually does what you want to do: it paints a row blue and the row does not change color if you click elsewhere in the page. (Only when another row is selected)
There are 2 selection models:
One that lets you select only one row, and another one that lets you select multiple rows.
MultiSelectionModel<Row> selectionModel = new MultiSelectionModel<Row>();
table.setSelectionModel(selectionModel);
SingleSelectionModel<Row> selectionModel = new SingleSelectionModel<Row>();
table.setSelectionModel(selectionModel);
The solution of user905374 did actually work. I mentioned in my first post that I already tried the solution with a selectionModel and that it did not work. This was partially true. It does work, but only if the table does NOT contain a CheckboxCell.
Following a working and the not working example. I think this might be a bug, but I am not sure if I miss something.
final CellTable<LicenceDto> licenseTable = new CellTable<LicenceDto>();
final SingleSelectionModel<LicenceDto> selectionModel = new SingleSelectionModel<LicenceDto>();
licenseTable.setSelectionModel(selectionModel);
//--- If I add this column, the selection does work.
Column<LicenceDto, String> workingColumn = new Column<LicenceDto, String>(new TextCell()) {
#Override
public String getValue(LicenceDto object) {
return "Works";
}
};
workingColumn.setFieldUpdater(new FieldUpdater<LicenceDto, String>() {
#Override
public void update(int index, LicenceDto object, String value) {
;
}
});
licenseTable.addColumn(workingColumn);
//--- If I add this column, the selection does NOT work anymore.
Column<LicenceDto, Boolean> notWorkingColumn = new Column<LicenceDto, Boolean>(new CheckboxCell(true, true)) {
#Override
public Boolean getValue(LicenceDto object) {
return object.getEnabled();
}
};
notWorkingColumn.setFieldUpdater(new FieldUpdater<LicenceDto, Boolean>() {
#Override
public void update(int index, LicenceDto object, Boolean value) {
presenter.enableLicense(object, value);
}
});
licenseTable.addColumn(notWorkingColumn);
You can even combine multiple cells and add them to the table (e.g. LinkActionCell etc). As long as there is no CheckboxCell, the blue selection with the SingleSelectionModel does work like a charm. Does anyone see what I do wrong with this CheckboxCell or is there a bug?
UPDATE
It was simply a usage error of me. The problem was that I set handlesSelection to true (second parameter of the CheckboxCell constructor) even thought I don't handle anything. Setting it to false solves the problem.
Bottomline: Use a selection model (e.g. SingleSelectionModel) and do not set the handlesSelection parameter to true of the CheckboxCell constructor to true, if you don't handle the selection by yourself.
You should observe the Showcase demo again. This time use the checkbox on the left most column i.e the first column. On selection the row turns blue indicating the row selection is made. This is when you have SelectionModel set up. Click on the page anywhere outside the CellTable/DataGrid the selection is not changed.
Now, instead of choosing the row via checkbox from first column, you click on a row in any other column. The row turns yellow. Click on the page anywhere outside the CellTable/DataGrid the focus/yellow is lost.
"colored in yellow" indicates row is under focus and being edited and not selected.
Note - you can force row selection by using click events per cell.
Try something like this:
CellTable table;
YourDataObject object = new YourDataObject(...);
SingleSelectionModel<YourDataObject> selectionModel =
new SingleSelectionModel<YourDataObject>();
table.setSelectionModel(selectionModel);
...
table.setSelected(object, true);
Use MultiSelectionModel if you wish more than one line to be highlighted.
Store the selected row's index. When user selects row, change row's style to some "selected-style" appropriate for your case (defined in your css file) and remove selected style from the previously selected row. Also don't forget to update selected row's index.
If you provide some code from the original version I help you out with some code with pleasure.
i have a celltable in GWT, I can change color of a specific column by this
celltable.addColumnStyleName(4, "bluetext");
but how can i change for example color of row No 3
Thanks
You have to provide a RowStyles object that returns css class names for each row. So, to set a particular color for a row, you'd have to define a css class with that color, and then cause your RowStyles object to return that class for the relevant rows.
I think you set this with cellTable.setRowStyles or something similar.
cellTable.setRowStyles(new RowStyles<T>() {
#Override
public String getStyleNames(T rowObject, int rowIndex) {
if (rowIndex == 3) {
return "bluetext";
} else {
return "normaltext";
}
});
If you need to update row color based on a value changed in one of the cells, you can add the following code to the fieldUpdater of this cell:
#Override
public void update(int index, Object object, String value) {
if (someConditionIsMet) {
myTable.getRowElement(index).addClassName("redBackground");
}
}
In your CSS file add this style:
.redBackground {
background-color: red !important;
}
To answer the last comment that the style is in the row element but is not being rendered:
Using setRowStyles(new RowStyles() ...
The only way I got the styles to appear was to use brute force.
I had to remove the row from my List store, add it back to the same index and then refresh the RowModel.
For what it's worth.
I'm trying to use the new GWT CellTable widget but my table needs to support one row expansion, i.e. there is a zippy on the left of a row and when it's clicked, the row should expand to provide more detail information and this row should span across all columns. Is it possible to achieve this with the CellTable? How do I add a row that spans all columns between other rows dynamically?
Any help will be appreciated!
GWT 2.5 will add a CellTableBuilder with the exact goal of allowing this kind of things.
You can find a live example at http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid (click on the "show friends" cells)
Can you not make the additional row invisible using getRowElement(int row) and using DOM methods to set display 'none' when rendered and as blank when the button, to show it, is hit.
I am working on the solution too and my plan for now is to use CSS classes + manual styles manipulation to make it look as I need. Not sure if I be able to merry it with GWT though: http://jsfiddle.net/7WFcF/
I took a different approach to solve this same problem.
The basic concept is using dom elements to add and remove rows based on an event. The following code is an abstract extension of CellTable. You'll want to call this method from your event that gets fired from the click to expand a row.
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NodeList;
public abstract class ActionCellTable<T> extends CellTable<T> {
protected abstract void addActionsColumn();
Integer previousSelectedRow = null;
public void displayRowDetail(int selectedRow, Element e){
//Get the tbody of the Cell Table
//Assumption that we want the first (only?) tbody.
Element tbody = this.getElement().getElementsByTagName("tbody").getItem(0);
//Get all the trs in the body
NodeList<Element> trs = tbody.getElementsByTagName("tr");
//remove previously selected view, if there was one
if(previousSelectedRow!=null){
trs.getItem(previousSelectedRow+1).removeFromParent();
//If the current is further down the list then the current your index will be one off.
if(selectedRow>previousSelectedRow)selectedRow--;
}
if(previousSelectedRow==null || selectedRow != previousSelectedRow){// if the are equal we don't want to do anything else
Element td = Document.get().createTDElement();
td.setAttribute("colspan", Integer.toString(trs.getItem(selectedRow).getChildNodes().getLength()));
td.appendChild(e);
Element tr = Document.get().createTRElement();
tr.appendChild(td);
tbody.insertAfter(tr, trs.getItem(selectedRow));
previousSelectedRow=selectedRow;
} else {
previousSelectedRow=null;
}
}
}
previousSelectedRow is used to track which item is "expanded", this could probably be achieved using classes or IDs. If needed I can elaborate more on the CellTable, events, views, and activities.