gwt datagrid Bootstrap Select cell (need to execute javascript after cell has been added/rendered) - select

Question

I inherited a project that uses GWT to create a web application. It uses a GWT wrapper for Bootstrap3 to do the styling of elements. This is working nicely for the most part. Now I hit a road block trying to add a Bootstrap3 Select to a GWT DataGrid table that currently uses a GWT SelectionCell. The problem is that a SelectionCell is not 'Bootstrap styled' and therefore doesn't match the style of the rest of web application.
Unfortunately, I cannot simply add the Select to a GWT DataGrid as the Select does not implement the GWT Cell interface nor does it extend a class that can be added to a Column that is then added to the DataGrid. Sub classing Select and implementing Cell fixes this problem. However, I cannot get the Select to render properly as it requires a JavaScript function to be executed after the Select has been attached to the DOM which it never is being wrapped by a Column in a DataGrid.
Instead, it is rendered into a SafeHtmlBuilder by the render function of Cell.
// GWTBootstrap3::Select function to render the Select
public void render() {
if (isAttached())
command(getElement(), SelectCommand.RENDER);
}
protected native void command(Element e, String command) /*-{
$wnd.jQuery(e).selectpicker(command);
}-*/;
Since the Select is never attached to the DOM I need to call the selectpicker function manually. For his, I created my own native function which I need to call after the SafeHtmlBuilder has been added to the DataGrid. If my Select subclass accepts CLICK events through Cell's onBrowserEvent and calling the native function after clicking into the cell renders the Select properly.
What I cannot figure out is when to call the selectpicker function programatically to render the Select automatically after a row has been added by an RPC call. I tried to register different handlers to no avail. The handlers are called and my native function wrapping the selectpicker function is called as well but it seems like the HTML select has not yet been added to the table. Calling the above JavaScript snipped from the JavaScript console of a browser also works. So it should work find but I need to find the right place to call :(
Handlers in DataGrid that I am using:
addLoadingStateChangeHandler
addRowCountChangeHandler
I also tried to call it at different places after the calls to add to DataGrid the data have been made. Again, the HTML select doesn't seem to have been added to the table. ie. when I call the JavaScript snipped right after a call to myListDataProviderObject.getList()addAll(my data).

Answer 1

Most likely you need to add a Scheduler call before calling your native method to make sure that the browser finished rendering the UI (e.g. your DataGrid) before this call is executed.