Use Select in CellTable or DataGrid

[wildcart]

Is there any way to use a Select in a CellTable or DataGrid without subclassing AbstractCell<C> or implementing Cell<C>?

I know that I can add a GWT SelectionCell to get the functionality I want but this uses the browser's / HTML's select which is not styled correctly (no Bootstrap styles are applied).

[crevete]

The problem is CellTable and DataGrid use HTML to render each cell content. So you may inject the Select JS and CSS, then write in your cell some native HTML like :

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

When loading the page, the select JS will render it as bootstrap Select. But in this case, you are not able to use GwtBootstrap3 Select APIs.

Maybe you could try FlexTable that allows you to setWidget in specific cell.

[wildcart]

thanks for the quick reply.

Unfortunately, the select is not added when the page is loaded but after an RPC call is made to receive the data from a server (should have mentioned this before :( ). So the main problem is that I need to call the JS to render the select manually and I can't find the function I have to hook into. I tried to add several listeners to DataGrid to call the JS after the grid has been modified. The JS is called but the select has not been rendered yet. Also calling the JS after a call to ListDataProvider::getList::addAll doesn't work. Again the select doesn't seem to be added yet.

I'll checkout FlexTable but this would require a lot of refactoring :(

I also gut the suggestion to use a Timer to trigger the JS call some time after the Select has been 'added' which I will also investigate. This of course has the drawback the Selects will probably been draw slightly delayed.

Thanks again for the quick reply. I will report back how I solved the problem.

[wildcart]

Using a Timer called from DataGrid::redraw renders the selects after the data is added to the grid. Adding the Timer to the render function of my Cell implementation doesn't work even if I set the timeout of the timer to 20 seconds and the select is clearly added to the DOM . After selecting another value from the drop-down the grid/cell is redrawn which removes the rendered select. I see my Cell's render method and the JS being called but the JS does not render the select. Manually calling the JS from the Firebug console works.

I stopped perssuing this for now and instead added the Bootstrap styles to the select. This way at least the select is styled, except the little button on the right with the triangle. Th options popup is not styled.