updating GWT(GXT) Buttoncell in a grid at runtime - gwt

I am creating a button cell in GXT Grid,
and adding the cell in my grid column like this
myCol.setCell(getButtonCell());
Now all cells are drawn , after that depends on the server call i want to update my cell with a new Value of MyDTO.
So on my RPC success , I want to call this render for all of my cells and update there values.
How can i achieve this.
public ButtonCell<MyDTO> getButtonCell()
{
ButtonCell<MyDTO> cellTest = new ButtonCell<MyDTO>()
{
#Override
public void render(Context context, MyDTO value, SafeHtmlBuilder
sb)
{
sb.appendHtmlConstant(value.getName());
}

A Sencha GXT grid uses a ListStore. To show new data inside the grid, the store needs to be updated. This can be done by calling store.addAll(theNewDataList). Keep in mind to clear the store before adding new values.
Updating the store will force the grid to redraw. During the redraw, the render-method of the ButtonCell will be called. To change the layout of the button, implement inside the render-method what you want to do.
This is an example from the Sencha GXT Explorer (https://examples.sencha.com/gxt/examples/#ExamplePlace:grid_aggregationgrid):
final NumberFormat numberFormat = NumberFormat.getFormat("0.00");
changeColumn.setCell(new PropertyDisplayCell<Double>(new DoublePropertyEditor(numberFormat)) {
#Override
public void render(com.google.gwt.cell.client.Cell.Context context, Double value, SafeHtmlBuilder sb) {
String style = value < 0 ? "red" : "green";
sb.appendHtmlConstant("<span style='color:" + style + "'>");
super.render(context, value, sb);
sb.appendHtmlConstant("</span>");
}
});
In case the value is less than 0 it will render a red string otherwise a green one.
Hope that helps.

Related

How to disable(not remove) a column in celltable of gwt

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

GWT - Editable CellTable with password column

I have CellTable with password as one column. I want the password column to be editable.
My code is something like follows
public class EditPasswordTextCell extends EditTextCell {
#Override
protected void edit(Context context, Element parent, String value) {
setValue(context, parent, value);
InputElement input = getInputElement(parent);
input.setAttribute("type", "password"); //$NON-NLS-1$ //$NON-NLS-2$
input.focus();
input.select();
}
}
This brings up a password box when clicking on the cell. But after finished editing and the value shown in the column is in plain text. Then i decided to override the renderer methods. But most of the methods in EditTextCell class are private, so i ended up overriding
#Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
value = "******"; //$NON-NLS-1$
super.render(context, value, sb);
}
The above code works fine for first rendering and not for the subsequent.
Now the question arises, should i extend from EditTextCell or AbstractEditableCell?
Easy way
You can pass a SafeHtmlRenderer to the EditTextCell constructor. So that renderer could render the normal view instead of using its default template (normal <input>).
Maybe more formal
It seems your cell is different in view mode as in edit mode so a non-EditTextCell class seems appropiate. But anyway, the first way seems easier...

Adding style to a ButtonCell

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
}

Setting a drag image in GWT 2.4

I need to implement drag and drop for cells in a CellTable. Following the example from the MobileWebApp I implemented a custom draggable cell:
public class DraggableCell extends AbstractCell<ProductProxy>{
interface Templates extends SafeHtmlTemplates {
#SafeHtmlTemplates.Template("<div draggable=\"true\">{0}</div>")
SafeHtml simpleTextTemplate(String text);
}
protected Templates templates = GWT.create(Templates.class);
public DraggableCell() {
super("dragstart");
}
#Override
public void render(Context context, ProductProxy value, SafeHtmlBuilder sb){
sb.append(templates.simpleTextTemplate(value.getName()));
}
#Override
public void onBrowserEvent(Context context, Element parent,
ProductProxy value, NativeEvent event,
ValueUpdater<ProductProxy> valueUpdater) {
final Integer cursorOffsetX = 0;
final Integer cursorOffsetY = 0;
if ("dragstart".equals(event.getType())) {
// Save the ID of the entity
DataTransfer dataTransfer = event.getDataTransfer();
dataTransfer.setData("text", value.getId());
SafeHtmlBuilder sb = new SafeHtmlBuilder();
sb.appendEscaped(value.getSn());
Element element = DOM.createDiv();
element.setInnerHTML(sb.toSafeHtml().asString());
// Set the helper image.
dataTransfer.setDragImage(element, cursorOffsetX, cursorOffsetY);
}
}
I use a new element for the drag image (in the MobileWebApp they just use the parent element), but unfortunately no image is displayed during the drag. I thought that maybe the new element needs to be attached to the DOM first, so I created a helperPanel and attached the element to it:
DOM.getElementById("dragHelperPanel").appendChild(element);
// Set the helper image.
dataTransfer.setDragImage(element, cursorOffsetX, cursorOffsetY);
This works fine in Firefox 6, but no luck in Chrome (using the latest stable version), so maybe this isn't the right way to do it. Any ideas? Thanks!
You can try the GWT Drag & Drop API. I have used it and its a good one even in mobile devices.
http://code.google.com/p/gwt-dnd/
Try the Demo here,
http://allen-sauer.com/com.allen_sauer.gwt.dnd.demo.DragDropDemo/DragDropDemo.html
Its quite simple to implement and don't have any issues so far for me

gwt celltable: Possible to only make some cells in a column editable?

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().