Setting the width of a column without clipping TextInputCell in GWT 2.2 CellTable?

Question

I have a rather peculiar problem. I am using CellTable from GWT 2.2 release. The CellTable is configured for fixed layout. I have a editable column (TextInputCell) in the table.

I am currently using setColumnWidth method on the CellTabel to fix the width of the column. This works well, but it does not enforce the width constraint on the input text element. As a result, the editor input field overflows under the column, giving the impression of it being clipped out.

Here's a code sample from GWT docs modified to demonstrate the problem. Notice the name field is not resized and overflows inside the table.

public class Trial implements EntryPoint { private static class Contact { private static int nextId = 0;

    private final int id;
    private final String address;
    private Date birthday;
    private String name;
    private Long number;

    public Contact( String name, Date birthday, String address, Long number )
    {
        nextId++;
        this.id = nextId;
        this.name = name;
        this.birthday = birthday;
        this.address = address;
        this.number = number;
    }
}

private static final List<Contact> CONTACTS = Arrays.asList( new Contact( "John", new Date( 80, 4, 12 ), "123 Fourth Avenue", 0L ), new Contact( "Joe",
        new Date( 85, 2, 22 ), "22 Lance Ln", 1L ), new Contact( "George", new Date( 46, 6, 6 ), "1600 Pennsylvania Avenue", 2L ) );


public void onModuleLoad( )
{
    final CellTable<Contact> table = new CellTable<Contact>( 10 );
    table.setWidth( "60px", true );
    ListDataProvider<Contact> listPrvdr;

    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" );
    table.setColumnWidth( nameColumn, "60px" );

    nameColumn.setFieldUpdater( new FieldUpdater<Contact, String>( )
    {
        public void update( int index, Contact object, String value )
        {
            object.name = value;
            table.redraw( );
        }
    } );

            listPrvdr = new ListDataProvider<Contact>( );
    listPrvdr.addDataDisplay( table );
    RootPanel.get( ).add( table );

    listPrvdr.getList( ).addAll( CONTACTS );
}

}

What am I missing? How do I enforce the width constraint on the input field and not just the host column?

Answer 1

I used external CSS to manage all the niggles. Did not take a lot of effort since I had to subclass TextInputCell anyways. There is no direct way to style TextInputCell element if you are not sub-classing and cannot use external CSS fixes for whatever reason.

If anybody has a better solution, please share by replying to this thread.

Answer 2

  ......
    Column<yyyData,String> xxxColumn = new Column<yyyData,String>
              (new TextInputCell()) {
        @Override
        public String getValue(yyyData data) {
            return String.valueOf(data.getxxx());
        }
        @Override 
        public String getCellStyleNames(Context context,yyyData data)
        {
            if (Float.valueOf(data.getxxx()) <= 61) 
                return ("test");
            else
                return ("mystyle");
        }
    };
 ........

 css file
    .test input,td.test input{ 
         width: 4em;
         border: 1px solid #FFFF66;
    }
    .mystyle input, td.mystyle input {
          width: 2em;
          border: 2px solid #2396AF;
    }

Answer 3

I'll just post a full working class for anyone who needs a bit more help:

static class MyInputCell extends TextInputCell
{
    private static Template template;

    interface Template extends SafeHtmlTemplates
    {   
        // {0}, {1}, {2} relate to value, size, style
        @Template("<input type=\"text\" value=\"{0}\" tabindex=\"-1\" size=\"{1}\" maxlength=\"{1}\" style=\"{2}\"></input>")
        SafeHtml input(String value, String size, String style);
    }

    public MyInputCell ()
    {
        template = GWT.create(Template.class);
    }

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

        String s = (viewData != null) ? viewData.getCurrentValue() : value;
        if(s != null)
        {
            // this is where we set value, size, style
            sb.append(template.input(s, "3", "width: 50px"));
        }
        else
        {
            sb.appendHtmlConstant("<input type=\"text\" tabindex=\"-1\"></input>");
        }
    }

Answer 4

As far I understand, the private member

private static Template template;

inside the TextInputCell (as well as EditTextCell) cares about the view of the inner input element. I did extend my class from AbstractEditableCell (as TextInputCell does) and assign my own template like:

@Template("<input type=\"text\" value=\"{0}\" tabindex=\"-1\" size=\"{1}\" maxlength=\"{1}\" style=\"{2}\"></input>")