Re: Selecting TextInputCell

This is what I do. First, I modified the input cell:

public class SpiralTextInputCell extends TextInputCell {

// Default value

private int startIndex = 1000;

public SpiralTextInputCell() {

}

/* When we have more than one DataGrid on a page, their tab indexes will collide.

* To prevent this, we should use a different start index for each grid after the first one.

*/

public SpiralTextInputCell(int startIndex) {

this.startIndex = startIndex;

}

@Override

public void render(Context context, String value, SafeHtmlBuilder sb) {

ViewData viewData = getViewData(context.getKey());

if (viewData != null && viewData.getCurrentValue().equals(value)) {

clearViewData(context.getKey());

viewData = null;

}

String s = (viewData != null) ? viewData.getCurrentValue() : value;

if (s != null) {

int tabIndex = startIndex + context.getIndex();

sb.appendHtmlConstant("<input type=\"text\" value=\"" + s + "\" tabindex=\"" + tabIndex + "\"></input>");

}

}

}

Now users can use their TAB key to move from one cell to another within their tables. Not that this may not be the desired behavior if you mix different cell types in the same table.

Second, set keyboardSelectionPolicy to DISABLED for your DataGrid/CellTable.

Finally, I modified my standard DataGrid with the following:

    addCellPreviewHandler(new Handler<T>() {

        @Override
        public void onCellPreview(CellPreviewEvent<T> event) {
            if ("keydown".equals(event.getNativeEvent().getType())) {

                /* We only support up and down arrows, because left and right arrows
                 * are used to navigate inside the input elements.
                 */

                int col = event.getContext().getColumn();
                int row = event.getContext().getIndex();
                if (event.getNativeEvent().getKeyCode() == 13 || event.getNativeEvent().getKeyCode() == 40) {
                    row++;
                    if (row == getRowCount()) {
                        row = 0;
                    }
                } else if (event.getNativeEvent().getKeyCode() == 38) {
                    row--;
                    if (row == -1) {
                        row = getRowCount() - 1;
                    }
                }
                getRowElement(row).getCells().getItem(col).getFirstChildElement().getFirstChildElement().focus();
         }
    }
});

Now users can hit the enter button to move to the next cell below. You can modify it so that focus moves to the next cell on the right, if any, and if not - to the first cell in the next row.

Users can also use up and down arrows to move from cell to cell in the same column.

By the way, I see no reason to use a CellTable anymore. Use DataGrid.

I hope this helps.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/CnWGSjJGR7QJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.