PDA

View Full Version : Editable Cell in Tree does not get focus



saravvij
6 Sep 2014, 2:50 PM
I have added a Cell with input textbox into Tree node. When I click on the input Textbox to enter the text, the input textbox loses the focus instantly, so, I am not able to type anything. When I try trace the events, I noticed the "blur" event is fired immediately followed by "click" event. I think, because pf blur event, the input textbox loses the focus. But, I am not sure why does the "blur" get fired for "click" event. Do you have any suggestion to overcome this issue?

Cell code is below:

import com.google.gwt.cell.client.AbstractCell;import com.google.gwt.cell.client.ValueUpdater;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.gwt.demo.client.gxt.model.BaseDto;


public class EditableTreeCell extends AbstractCell<BaseDto> {


public EditableTreeCell() {
super("change", "blur", "click", "keydown");
}


@Override
public void render(com.google.gwt.cell.client.Cell.Context context,
BaseDto value, SafeHtmlBuilder sb) {
sb.appendHtmlConstant("<div style=\"widht:100%;\">");
sb.appendHtmlConstant("<span id=\"labelId\">");
sb.appendHtmlConstant(value.getName());
sb.appendHtmlConstant("</span>");
sb.appendHtmlConstant("<input id=\"textInputId\" type=\"text\"/ style=\"width:200px;\">");
sb.appendHtmlConstant("</div>");

}
@Override
public void onBrowserEvent(Context context, Element parent, BaseDto value,
NativeEvent event, ValueUpdater<BaseDto> valueUpdater) {

// Check that the value is not null.
if (value == null) {
return;
}

// Call the super handler, which handlers the enter key.
super.onBrowserEvent(context, parent, value, event, valueUpdater);


final Element targetElement = event.getEventTarget().cast();

System.out.println("Event=" + event.getType() +" KeyCode=" + event.getKeyCode() + " Element=" + targetElement.getId());
}


}




Tree code snippet is below:

final Tree<BaseDto, BaseDto> tree = new Tree<BaseDto, BaseDto>(store, new ValueProvider<BaseDto, BaseDto>() {

@Override
public BaseDto getValue(BaseDto object) {
return object;
}


@Override
public void setValue(BaseDto object, BaseDto value) {
}


@Override
public String getPath() {
return "name";
}
});

tree.setAllowTextSelection(true);
tree.setCheckable(true);
EditableTreeCell cell = new EditableTreeCell();


tree.setCell(cell);
tree.setWidth(300);
tree.getStyle().setLeafIcon(ExampleImages.INSTANCE.music());


The output printed in the console is below for input textbox click

Event=click KeyCode=0 Element=textInputIdEvent=blur KeyCode=0 Element=textInputId





Tree is looking like below in the browser
50255

gui0506
8 Jun 2015, 10:59 AM
I also encountered this issue. Did you solve it?

saravvij
8 Jun 2015, 2:23 PM
I ended up using EditableTreeGrid - http://www.sencha.com/examples/#ExamplePlace:editabletreegrid