CODEWITHSUNDEEP
gwt
Riley Lark
Riley Lark

Reputation: 20890

Specifying which Cell should receive focus next in a CellTable

I'm using GWT 2.1.0

I have a CellTable populated with Columns that use different Cells to edit different types of values (e.g. date, string, etc). I want the user to be able to click in a cell, type a value, and hit enter to go directly to editing the next cell down, or tab to go directly to editing the next cell over.

I've been looking through the Cell and CellTable interfaces but can't find anything that looks relevant. How can I achieve this effect?

Upvotes: 1

Views: 1997

Answers (1)

Ashwin Prabhu
Ashwin Prabhu

Reputation: 7624

I had a similar requirement and I could not find a out-of-the-box solution. I ended up subclassing TextInputCell and add tabIndex support myself.

Here's some bits and pieces of the subclass (hopefully it will compile, too lazy to check). Unfortunately I cannot post the entire subclass, since it has lot may other things which are not related to the current question. This solution takes care of tabbing to the next cell, but for enter support, you may need to override onBrowserEvent.

public class EditTextInputCell extends TextInputCell
{
    int startTabIndex;

    interface TabbedTemplate extends SafeHtmlTemplates
    {
        @Template( "<input type=\"text\" value=\"{0}\" tabindex=\"{1}\" class=\"{2}\" title=\"{3}\"></input>" )
        SafeHtml input( String value, String tabindex, String styleClass, String title );
    }

    private static TabbedTemplate template;

    public EditTextInputCell( int startTabIndex )
    {
        this.startTabIndex = startTabIndex;
    }

    @Override
    public boolean isEditing( Context context, Element parent, String value )
    {
        return true;
    }

    @Override
    public void render( Context context, String value, SafeHtmlBuilder sb )
    {
        // Get the view data.
        Object key = context.getKey( );
        ValidationData viewData = getViewData( key );
        if ( viewData != null && value.equals( viewData.getCurrentValue( ) ) )
        {
            clearViewData( key );
            viewData = null;
        }

        String strToDisp = ( viewData != null && viewData.getCurrentValue( ) != null ) ? viewData.getCurrentValue( ) : value;
        String tabIndex = "" + startTabIndex + context.getIndex( ) + context.getColumn( );
        boolean invalid = ( viewData == null ) ? false : viewData.isInvalid( );
        String styleClass = "cellTableCell-valid";
        String errorMessage = "";
        if ( invalid )
        {
            styleClass = "cellTableCell-invalid";
            errorMessage = viewData.getMessage( );
        }

        if ( strToDisp != null )
        {
            SafeHtml html = SimpleSafeHtmlRenderer.getInstance( ).render( strToDisp );
            // Note: template will not treat SafeHtml specially
            sb.append( getTemplate( ).input( html.asString( ), tabIndex, styleClass, errorMessage ) );
        }
        else
        {
            sb.appendHtmlConstant( "<input type=\"text\" tabindex=\"" + tabIndex + "\" class=\"" + styleClass + "\" title=\"" + errorMessage + "\"></input>" );
        }
    }   
        private TabbedTemplate getTemplate( )
    {
        if ( template == null )
        {
            template = GWT.create( TabbedTemplate.class );
        }

        return template;
    }}

Upvotes: 1

Related Questions