I'm using GWT 2.4. When using a CellTable, I've seen its possible to add a column in which all of the cells are editable ...
final TextInputCell nameCell = new TextInputCell();
Column<Contact, String> nameColumn = new Column<Contact, String>(nameCell) {
#Override
public String getValue(Contact object) {
return object.name;
}
};
table.addColumn(nameColumn, "Name");
but what if I don't want every cell in the column to be editable, only specific ones, based on properties in my "Contact" object? How would I set this up? Thanks, - Dave
The way I would do it is extend the TextInputCell and override the render method to render something else, if you don't want the value in that particular row editable.
Something like this:
public class MyTextInputCell extends TextInputCell {
#Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
YourObject object = getYourObject();
if ( object.isThisCellEditable() ) {
super.render(context,value,sb);
} else {
sb.appendEscaped(value); // our some other HTML. Whatever you want.
}
}
}
In the render method you have access to the cell's context. Context.getIndex() returns the absolute index of the object. I can't remember of the top of my wad right now, but if you do not provide a ProvidesKey implementation when creating your CellTable you will get one that will use the object itself as the key. So you can get the object using Context.getKey().
Related
i am new to GWT.I know tablename.removeColumn(columnname) can be used to remove the column, but instead of removing i want to disable it. Can anybody please help
thnx in advance!
There are some ways to do this, but an easy and clean way to do it is the following :
public static class CustomTextInputCell extends TextInputCell {
#Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
String url = Window.Location.getHref();
boolean isEditable = url.contains("xyz");
if (isEditable) //Condition if editable or not
super.render(context, value, sb);
else if (value != null) {
sb.appendEscaped(value);
}
}
}
The render method will be called every time this cell is rendered. So every time it will check if the condition is met to be enabled or not.
This allows you to keep all the functionality of an editable cell but disable it easily when the condition is met.
You use it like this
Column<YOUR_OBJECT_HERE, String> column = new Column<YOUR_OBJECT_HERE, String>(new CustomTextInputCell());
cellTable.addColumn(column , "YOUR_HEADER_HERE");
I ended up creating a new component that has the columns that i want and called that component based on the url
String url = Window.Location.getHref();
boolean value = url.contains("xyz");
if(value)
{
component.setEnable(true);
}
else{
componentprevious.setEnable(true);
}
enter code here
I have a class ContactCell based on AbstractCell.
It has two Labels and one Image (defined in GWT 2.5's UiBinder).
How do I Column.addColumn() to add a this custom cell to a CellTable?
And If so, how do I use the method getValue() to populate the fields of ContactCell when getValue() only returns simple values (such as String).
Column<Contact, String> column = new Column<Contact, String>(
new ContactCell()) {
#Override
public String getValue(Contact object) {
return object... CAN ONLY RETURN ONE VALUE. HOW TO POPULATE 2 LABELS & IMAGE?
}
};
You can change the render string by overridding the onrender mathod of the cell as follows.
Assuming 2 labels and a image can be computed from the value returned by getValue mathod.
ContactCell contactCell = new ContactCell()
{
#Override
public void render( com.google.gwt.cell.client.Cell.Context context, SafeHtml value, SafeHtmlBuilder sb )
{
// do value check and compute label1 and label2 and calso compute the image path.
sb.appendHtmlConstant( "<label>LABEL1</label>" +"<label>LABEL2</label>"+"<image></image>" )
}
});
Column<Contact, String> column = new Column<Contact, String>( contactCell )
{
#Override
public String getValue(Contact object)
{
return object... CAN ONLY RETURN ONE VALUE. HOW TO POPULATE 2 LABELS & IMAGE?
}
};
You can either use an IdentityColumn instead of a normal Column (will pass through the entire Contact object) or you use a normal Column like this:
Column<Contact, String[]> column = new Column<Contact, String[]>(
new ContactCell()) {
#Override
public String[] getValue(Contact object) {
String[] retvalue = new String[2];
retvalue[0] = "SOMETHING";
retvalue[1] = "SOME OTHER THING";
return retvalue;
}
};
If the cell based on AbstractCell is defined using UiBinder then it's not currently (GWT 2.5) possible to add such cells to a CellTable.
I know my question is considered initially to refer to the "very novice" level, but I have spent quite o lot of time on searching for the answer. I have used in a gwt application a DataGrid and I have attached a diversity of specific Cell widgets (i.e. TextCell, ButtonCell). My concern is how I can add and handle styling to the button of a ButtonCell through custom css. The code which implements the column of ButtonCells looks like as follows:
Column<FilterInfo, String> delButtonColumn = new Column<FilterInfo, String>(new ButtonCell()) {
#Override
public String getValue(FilterInfo object) {
return "X";
}
};
So, how can I add styling to the button (not to the entire Cell)? I suspect that I should also override the render function, however I cannot figure out how the styling is applied
#Override
public void render(Context context, FilterInfo object, SafeHtmlBuilder sb) {
super.render(context, object, sb);
???
}
You can use the setCellStyleNames() method in Column to apply a style that will be applied to every cell of the column. You have to use GWT 2.4 for this to work. It will probably be something like that. Please note that the code was written outside of any IDE, so it may contain errors.
Column<FilterInfo, String> delButtonColumn = new Column<FilterInfo, String>(new ButtonCell()) {
#Override
public String getValue(FilterInfo object) {
return "X";
}
};
delButtonColumn.setCelLStyleNames("yourStyleName");
And the css :
.yourStyleName.gwt-Button{
//your styling here
}
I need to wrap the text of the column. My column size is small. So if i set column width some of the letters are not visible. Since the length of the text is bigger than the column size. If there is a space in the text then it wraps itself. So I need to wrap the text.
For example, emailColumn it's value is xxxxxxxxxxxxx#XXXXXXX.com.
I expect the result as xxxxxxxxxxx#x in the first line and xxxx.xom in the next line.
Is it possible?
I tried wrap text inside cell table, we can achieve this by creating custom column.
Create one abstract cell column for cell table,append html contant in that cell and add column to cell table like this.
Add this code in your main java file, which contains cell table and paste below code in neccessary place.
WrappedColumn<T> textDetail = new WrappedColumn<T>() {
// This is method in wrapped details column java file.
public WrapDetails getValue(T object) {
return new WrapDetails( T.<your method1 for wrap text>(), T.<your method2 for wrap text>());
}
};
<your cell table>.addColumn(textDetail);
Create new java file named like 'WrapDetails.java' for render dynamic data and paste below code.
public class WrapDetails extends Composite {
String mail_id;
String website;
public WrapDetails(String id, String site) {
this.mail_id = id;
this.website = site;
}
}
Create new java file for wrap text column with named 'WrappedColumn.java' and paste below code.
public abstract class WrappedColumn<T> extends Column<T, WrapDetails> {
public WrappedColumn() {
super(new WrapDetailsColumnCell());
}
/**
* Return the passed-in object.
* #param object The value to get
*/
#Override
public WrapDetails getValue(T object) {
return null;
}
}
Create new java file named as 'WrapDetailsColumnCell.java' and paste below code.
public class WrapDetailsColumnCell extends AbstractCell<WrapDetails> implements Cell<WrapDetails>{
String mail_id, website;
/**
* Add this constructor, if you want click event for this column.
*/
public WrapDetailsColumnCell() {
super("click", "keydown");
}
/**
* This method provides style for your wrap data
*
*/
#Override
public void render(Context context, WrapDetails value, SafeHtmlBuilder sb) {
sb.appendHtmlConstant("<div><table width='100%'>");
sb.appendHtmlConstant("<tr><td><div style='your style here'>"+mail_id+"</div></td></tr>");
sb.appendHtmlConstant("<tr><td><div style='your style here'>"+website+"</div></td></tr>");
sb.appendHtmlConstant("</table></div>");
}
/**
* This method update cell value on click event.
*
*/
#Override
public void onBrowserEvent(Context context, Element parent,WrapDetails value, NativeEvent event, ValueUpdater<FaxDetails> valueUpdater) {
super.onBrowserEvent(context, parent, value, event, valueUpdater);
setValue(context, parent, value);
valueUpdater.update(value);
}
}
It is working for me well. After tried this, let me know any issue if you get. Have a fun.
I want to build a CheckBox List like...
|===========|
| x label0 |
| x label1 |
| x label2 |
|===========|
...using CellList and I've done the following:
final List<Boolean> checks = Arrays.asList(true, false, true, true, false);
final CheckboxCell checkboxCell = new CheckboxCell();
final CellList<Boolean> checkBoxCellList = new CellList<Boolean(checkboxCell);
checkBoxCellList.setRowData(checks);
...so I get:
|=======|
| x |
| x |
| x |
|=======|
But how can I supply not only the value of a CheckBox (Boolean) but also its
label like it's possible with
CheckBox#setText("label0")
CheckBox#setValue(true)
?
I have done a similar thing for CellTable. So maybe SOMETHING like this will work. You need to provide your own render() method. So in the render() method below, you can add whatever you want.
Column<MyJSONObject, String> selectCheckBoxColumn =
new Column<MyJSONObject, String>(new MyCheckBoxCell()) {
#Override
public String getValue(MyJSONObject object) {
return object.getInternalId() + SEPERATOR + "true";
}
};
MyCellTable.addColumn(selectCheckBoxColumn, "Display title");
.....
.....
.....
private class MyCheckBoxCell extends AbstractCell<String> {
#Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
// ##############################################
String[] values = value.split(SEPERATOR);
// NOW values[0] contains the string value
// AND values[1] contains the boolean value
// ##############################################
sb.appendHtmlConstant("<input type='checkbox' name='" + htmlDOMId1 + "'" +
" id='" + htmlDOMId1 + "'" +
" value='" + value + "'" +
"></input>");
}
}
I know this question is old but I've just done this, so thought I would provide an answer anyway.
A CellList can only hold a vertical list of a single cell type. If you want to have a Checkbox in there, along with some other data, you need to build a custom cell and extend CompositeCell, which will combine and render multiple cells inside a single cell. You can see this in action here in the GWT Showcase (the innermost cell in the CellTree).
So your code should look something like this:
// first make a list of HasCell type - MyClass is the type of object being displayed in the CellList (could be String for simple labels)
List<HasCell<MyClass, ?>> hasCells = new ArrayList<HasCell<MyClass, ?>>();
// then add your checkbox cell to it
hasCells.add(new HasCell<MyClass, Boolean>()
{
private CheckboxCell cell = new CheckboxCell(true, false);
public Cell<Boolean> getCell()
{
return cell;
}
public FieldUpdater<MyClass, Boolean> getFieldUpdater()
{
return null;
}
#Override
public Boolean getValue(MyClass object)
{
return selectionModel.isSelected(object);
}
});
// then add your TextCell
hasCells.add(new HasCell<MyClass, MyClass>()
{
private TextCell cell = new TextCell(myString);
#Override
public Cell<MyClass> getCell()
{
return cell;
}
public FieldUpdater<MyClass, MyClass> getFieldUpdater()
{
return null;
}
public MyClass getValue(MyClass object)
{
return object;
}
});
// now construct the actual composite cell using the list (hasCells)
Cell<MyClass> myClassCell = new CompositeCell<MyClass>(hasCells)
{
#Override
public void render(Context context, MyClass value, SafeHtmlBuilder sb)
{
sb.appendHtmlConstant("<table><tbody><tr>");
super.render(context, value, sb);
sb.appendHtmlConstant("</tr></tbody></table>");
}
#Override
protected Element getContainerElement(Element parent)
{
// Return the first TR element in the table.
return parent.getFirstChildElement().getFirstChildElement().getFirstChildElement();
}
#Override
protected <X> void render(Context context, MyClass value, SafeHtmlBuilder sb, HasCell<MyClass, X> hasCell)
{
// this renders each of the cells inside the composite cell in a new table cell
Cell<X> cell = hasCell.getCell();
sb.appendHtmlConstant("<td>");
cell.render(context, hasCell.getValue(value), sb);
sb.appendHtmlConstant("</td>");
}
};
// then make the actual cellList, passing the composite cell
myList = new CellList<MyClass>(myClassCell);
// add selectionModel, making sure to pass in a checkBoxManager as a second parameter, or the selectionModel will not work
myList.setSelectionModel(selectionModel, DefaultSelectionEventManager.<MyClass> createCheckboxManager());
// construct a dataProvider for dynamic editing of the list (alternative to list.setRowData())
dataProvider = new ListDataProvider<MyClass>(data);
// associate the dataProvider with the CellList
dataProvider.addDataDisplay(myList);
The easiest way to do this is to use a CellTable and dont add column headings (so it looks like a CellList)
Have a column for the checkbox (using CheckBoxCell) and have a column for your other data.
This is the cleanest way. No mucking around with your own custom cells with html-checkboxes inside of them.
This also works well with things like having a MultiSelectionModel on the cell table to get the values of the checkboxes.
A GWT book I'm reading has an example of this, except the author uses a vertical panel with checkboxes in the panel. With a little styling, you have a listbox look