CellTable, Custom Header and Focus Problem

[Uemit]

Hi all

I am trying to implement a CellTable with a custom Column Header which displays a SearchBox (simple Textbox) below the normal Column Text for searching purposes. Something like that:

|   Header 1        |   Header 2          |

|  SEARCHBOX  |     SEARCHBOX |

-------------------------------------------------------

|    ROW 1 

------------------------------------------------------

|    ROW 2 

As soon as the user types in a character into the SearchBox a RangeChangeEvent is fired which leads to a server requests and the CellTable is updated with the new filtered list. 

Basically everything works fine. 

However as soon as the CellTable is refreshed (after typing in a character into the searchbox) also the SearchBox loses its focus and the user has to click with the mouse again into the SearchBox which is a little bit clumsy. 

This is probably related to the fact that the render method of the custom header and its cell is called after the CellTable refresh. Is there any way how to set the focus back to the SearchBox? I tried to set tabindex=0 but it didn't help. 

The important code is in the SearchCell class. In override the onBrowserEvent function and in the keyup part I set the boolean flag isChanged = True. In the blur part I set it back to False. How can I check this flag and set the focus on the SearchBox again?

Custom Header Class:

public static class SearchHeader extends Header<SearchTerm> {
    @Override
    public void render(Context context, SafeHtmlBuilder sb) {
        super.render(context, sb);
    }
    private SearchTerm searchTerm;
    public SearchHeader(SearchTerm searchTerm,ValueUpdater<SearchTerm> valueUpdater) {
        super(new SearchCell());
        setUpdater(valueUpdater);
        this.searchTerm = searchTerm;
    }
    @Override
    public SearchTerm getValue() {
        return searchTerm;
    }
 }

Custom Search Cell (used in the custom Header)

public static class SearchCell extends AbstractCell<SearchTerm> {

    interface Template extends SafeHtmlTemplates {
        @Template("<div style=\"\">{0}</div>")
        SafeHtml header(String columnName);

        @Template("<div style=\"\"><input type=\"text\" value=\"{0}\"/></div>")
        SafeHtml input(String value);
    }

   private static Template template;
   private boolean isChanged = false;

   public SearchCell() {
       super("keydown","keyup","change","blur");
       if (template == null) {
           template = GWT.create(Template.class);
       }
   }

   @Override
   public void render(com.google.gwt.cell.client.Cell.Context context,
       SearchTerm value, SafeHtmlBuilder sb) {
       sb.append(template.header(value.getCriteria().toString()));
       sb.append(template.input(value.getValue()));
   }

            @Override

            public void onBrowserEvent(Context context,Element parent, SearchTerm value,NativeEvent event,ValueUpdater<SearchTerm> valueUpdater) {

                if (value == null)

                    return;

                super.onBrowserEvent(context, parent, value, event, valueUpdater);

      if ("keyup".equals(event.getType()))
      {
          isChanged = true;
          InputElement elem = getInputElement(parent);
          value.setValue(elem.getValue());
          if (valueUpdater != null)
              valueUpdater.update(value);
      }
      else if ("blur".equals(event.getType())) {
          isChanged =false;
      }
 }

          protected InputElement getInputElement(Element parent) {

              Element elem = parent.getElementsByTagName("input").getItem(0);

              assert(elem.getClass() == InputElement.class);

              return elem.cast();

          }

    }

[Uemit]

I played a little bit around and tried to override the resetFocus method on the SearchCell but this method is never called. I suppose this only works if the Cell used in a row context and not in a header context?

My approach is somehow run schedule a deffered command which sets the focus but that's doesn't seem to be a really clean approach.
Is there maybe a better approach?

[Ümit Seren]

Well the deffered command doesn't really work either properly, because
it has a delay and that doesn't work when the user is typing fast. I
ended up putting the search box in a separate div above the table and
using CSS to align them and make them look like as if they were
headers. There is an answer in the stackoverflow question which shows
how to do it.


On Mon, Aug 27, 2012 at 5:58 PM, Lucas A <luca...@gmail.com> wrote:

> Hi Umit,
>
> Any updates on this issue? I am running into the exactly same focus problem. Could you post your deferred schedule approach? Thanks.
>
> --
> You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/Q4BxVPpzcjYJ.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
>

[lounes...@gmail.com]

 I had the same focus problem.I choosed a different approach!

a search box above the celltable no more focus problems!