Diable ListGrid CanvasItem Arrow Key actions.

[sirhallt]

Using SmartClient Version: v12.0p_2018-04-18/LGPL Development Only (built 2018-04-18)
Browser: Firefox 52.9.0 (32-bit)

I have a ListGrid in which I have created a CanvasItem for one of the Cells which contains a TextAreaItem and a Button. When editing the ListGrid row and inside the TextAreaItem when I use the Arrow Up or Down keys it doesn't move the cursor position, but rather changes the Editing row selected entirely making it impossible to change rows within the Text Area without using mouse clicks.

I have tried setting the setArrowKeyAction to "none" but this seems to have no affect.

Any other ways to fix this problem?

Thank you

[Isomorphic]

We'd recommend a different interface here: perhaps a pop-up window for editing the long value in the long text value. Expanding grid rows to accommodate the taller editor is a bit awkward, and still doesn't give very much room, or a resizable editor, both things the user may want. Also, the user might expect arrow navigation to change the grid row as it does for other fields.

However, setting arrowKeyAction:"none" should have worked to prevent this effect, and we'll check on why it isn't.

[sirhallt]

The button does in fact create a popup window for long values. But not every value in the table is always so long as requiring the popup. Hence the users using the TextAreaItem for shorter values. If the arrowKeyAction:"none" could be consistently applied that should work for our use case. Thank you!

[sirhallt]

Any update on setting arrowKeyAction:"none" to prevent this functionality?

[sirhallt]

Here is the source code of what the problem is:

ListGrid table = new ListGrid() {
@Override
protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {

final String fieldName = this.getFieldName(colNum);

HLayout recordCanvas = new HLayout(3);
recordCanvas.setHeight(22);
recordCanvas.setWidth100();
recordCanvas.setAlign(Alignment.LEFT);

ImgButton editImg = new ImgButton();
editImg.setShowDown(false);
editImg.setShowRollOver(false);
editImg.setLayoutAlign(Alignment.CENTER);
editImg.setSrc(URLPrefix.getImagePrefix()+"fullscreen.png");
editImg.setPrompt("View Text");
editImg.setHeight(16);
editImg.setWidth(16);
editImg.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
//....Build WIndow to show data
}
});

recordCanvas.addMember(editImg);

return recordCanvas;

}
};
table.setShowRecordComponents(true);
table.setShowRecordComponentsByCell(true);
table.setRecordComponentPosition(EmbeddedPosition.EXPAND);
table.setCanEdit(canEdit);
table.setCanHover(true);
table.setArrowKeyAction("none");
table.setValidateByCell(false);
table.setValidateOnChange(false);
table.setNeverValidate(true);
table.setEnterKeyEditAction(null);
table.setSelectionAppearance(SelectionAppearance.CHECKBOX);
table.setSelectOnEdit(false);
table.setModalEditing(true);
table.setShowSortArrow(SortArrow.FIELD);
table.setLeaveScrollbarGap(false);
table.setCanFreezeFields(false);
table.setCanCollapseGroup(false);
table.setCanPickFields(false);
table.setCanSelectText(true);
table.setCanDragSelectText(true);
table.setWrapCells(true);
table.setFixedRecordHeights(false);
table.setHeight100();
table.setShowAllRecords(true);
table.setOverflow(Overflow.VISIBLE);
table.setEditEvent(ListGridEditEvent.CLICK);
table.setConfirmCancelEditing(false);
table.setEditOnFocus(false);

final DynamicForm aform = new DynamicForm();
aform.setNumCols(2);
aform.setWidth("100%");
aform.setHeight(75);

final TextAreaItem tai = new TextAreaItem("tai");
tai.setHeight(75);
//tai.setLength(4000);
tai.setShowTitle(false);
tai.setCanFocus(true);
tai.setEnforceLength(true);

li.setCanFilter(false);
CanvasItem ti = new CanvasItem("tae","Description");
ti.setCanFocus(true);
ti.setShowTitle(false);
final ButtonItem ubtn = new ButtonItem("");
ubtn.setIcon("read_more.png");
ubtn.setTooltip("Edit Data");
ubtn.setWidth("25px");
ubtn.setStartRow(false);
ubtn.setEndRow(false);
aform.setFields(tai,ubtn);

ubtn.addClickHandler(new com.smartgwt.client.widgets.form.fields.events.ClickHandler() {
@Override
public void onClick(com.smartgwt.client.widgets.form.fields.events.ClickEvent event) {
//...build window to edit all data
}
});

((CanvasItem)ti).setCanvas(aform);

tai.addChangedHandler(new ChangedHandler(){
@Override
public void onChanged(ChangedEvent cevent) {
table.setEditValue(table.getEditRow(), table.getFieldNum(name), cevent.getValue());
}
});
ti.setWidth("100%");

li.setEditorProperties(ti);
li.setType(ListGridFieldType.TEXT);

table.setFields(li);

I would expect the table.setArrowKeyAction("none"); to prevent arrow keys from moving rows. Is there something above that would ovewrrite that?

[Isomorphic]

This is just a quick update to let you know this issue is still active. We see the problem and the design team are discussing the most appropriate way to address it.
We'll be following up when we have a solution figured out

Regards
Isomorphic Software

[Isomorphic]

We've decided to handle this with a new feature.
As of the next nightly build in the 12.0, 12.1d branches, you can call ListGridField.setArrowKeyEditAction(ArrowKeyEditAction.NONE) on a particular field to disable the default behavior of intercepting up and down arrow keypresses and shifting to a new edit row (allowing the native editor behavior - in this case moving around a text area embedded in a CanvasItem - to proceed)

Please let us know if you experience any problems with this feature

Regards
Isomorphic Software

[sirhallt]

This appears to now have fixed the issue. Thank you!