GWT EditTextCell : How to increase editable TextBox width in EditTextCell?

Question

I am using GWT2.3 in my project. I want to increase editableTextBox width when user click on editableTextCell. Problem is My Column width is 200 Px. when user clicks on editableTextCell then that TextBox width is around 125px in EditableTextCell is less as compare to column width.

I added EditTextCell in Celltable's column

Column stringColumn = new Column(new EditTextCell()) { // My Code }

cellTable.addColumn(stringColumn, "MyColumn"); cellTable.setColumnWidth(checkBoxColumn, 200, Unit.PX);

I tried following way to increase TextBox width but problem is I cannot edit in textbox + focus not losses

    @Override
            public void onBrowserEvent(Context context, Element elem,Record object, NativeEvent event) {
                String type = event.getType();

                  int editedTexBoxSize = (cellTable.getOffsetWidth()-100)/cellTable.getColumnCount();

                  if(elem.getInnerHTML().startsWith("<INPUT")){
                      String test = elem.getInnerHTML();
                     // test = <INPUT tabIndex=-1 value=P __eventBits="2048"></INPUT>

                     test= test.replace("value", " size="+editedTexBoxSize+" value");


                    // test = <INPUT tabIndex=-1 size=131 value=P __eventBits="2048"></INPUT>


                      elem.setInnerHTML(test);
                  }
                super.onBrowserEvent(context, elem, object, event);
            }

I want to Increase(set) TextBox width appear in EditTextCell is equal to column Width.

Any Solution ?

Answer 1

In my project I do that:

cellTable.getColumn(cellTable.getColumnIndex(column)).setCellStyleNames(CELL_CSS);

.edit-cell input {
    width: 290px;
}

Answer 2

Finally the answer ! I tried this even simplier using UIBinder by adding :

.edit-cell input {
    width: 30px;
    text-align: right;
}

Then for the cell table I added

 <c:CellTable
        addStyleNames='{style.edit-cell}'
        ui:field='itemTable' />

Wonderful !

Answer 3

You'll need to create a custom component. The out of the box EditTextCell does not allow you to set the size attribute of the input field, just the column width.

Have a look at the ValidateableInputCell impl here: In search of a GWT validation example... where art thou? for an example of how to craft a custom cell.

Admittedly the validation does not yet work but the ability to set the size on the input field within the cell does.