CODEWITHSUNDEEP
gwtsuggestbox
Aleksejs Mjaliks
Aleksejs Mjaliks

Reputation: 8707

Add SuggestBox to CellTable as an editable cell

Is there any way to SuggestBox to CellTable? Maybe there is another solution then SuggestBox?

I need to get an editable cell with suggestion feature?

I'm using GWT 2.4.

Upvotes: 4

Views: 2052

Answers (4)

Robin1990
Robin1990

Reputation: 1735

I needed this as a solution so I play around with the solution provided by Ande Hofer.

The exact same issue met by Ankit Singla, when the suggestbox is working fine when I press "Enter" key, but not from the "Mouse Click".

I go on further and add-on this onto the solution.

if (BrowserEvents.FOCUS.equals(eventType)) {
        ...
        ...

        suggestbox.addSelectionHandler(new SelectionHandler<Suggestion>() {

            @Override
            public void onSelection(SelectionEvent<Suggestion> event) {
                Suggestion selectedSuggestion = event.getSelectedItem();
                String selectedValue = selectedSuggestion.getReplacementString();

                onSuggestSelected(input, selectedValue, valueUpdater);
            }

        });

        suggestbox.onAttach();
    }

and a private function 

    private void onSuggestSelected(Element input, String value,
          ValueUpdater<String> valueUpdater) {
        input.blur();
        suggestbox.onDetach();
        if (suggestbox.getSuggestionDisplay().isSuggestionListShowing()) {
            ((DefaultSuggestionDisplay) suggestbox.getSuggestionDisplay()).hideSuggestions();
        }

        valueUpdater.update(value);
    }

So far so good.

Upvotes: 0

Ande Hofer
Ande Hofer

Reputation: 172

I needed this also and found a solution (under testing, but solong it is working):

I copied the Code from TextInputCell into a new Class SuggestBoxTextInputCell 

public class SuggestBoxTextInputCell extends AbstractInputCell<String, SuggestBoxTextInputCell.ViewData> {

    MySuggestBox suggestBox;

and added some lines to the onBrowserEvent method:

    // Ignore events that don't target the input.
    InputElement input = getInputElement(parent);
    String eventType = event.getType();
    if (BrowserEvents.FOCUS.equals(eventType)) {
        TextBox textBox = new MyTextBox(input);
        suggestBox = new MySuggestBox(getSuggestOracle(), textBox);
        suggestBox.onAttach();
    } 

    Element target = event.getEventTarget().cast();

The classes MySuggestBox and MyTextbox exist only to make the needed constructor and methods public: 

private class MyTextBox extends TextBox {
    public MyTextBox(Element element) {
        super(element);
    }
}

private class MySuggestBox extends SuggestBox {

    public MySuggestBox(SuggestOracle suggestOracle, TextBox textBox) {
        super(suggestOracle, textBox);
    }

    @Override
    public void onAttach() {
        super.onAttach();
    }

}

getSuggestOracle() only delivers the needed SuggestOracle. Hope someone can use this solution.

Upvotes: 1

Mustafa Ulu
Mustafa Ulu

Reputation: 185

I ended up using FlexTable instead of CellTable. With FlexTable you may put any widget inside a table cell.

Upvotes: 1

Steve J
Steve J

Reputation: 2674

I don't think you can add it directly in. Try using a ClickableTextCell as the cell for that column. Then code your ValueUpdater (which will be called when the cell is clicked) to open up a DialogBox. Put your SuggestBox, and other widgets (OK button, Cancel button, and such), inside that DialogBox. Initialize the SelectionBox with the current contents of the cell. The DialogBox will likely be a DialogBox subclass with extra state data you initialize with the object for that CellTable row as well as the field for that column, so that the OK action knows what field on what object to update with the new contents of the SuggestBox. Essentially it's a popup editor. Not ideal, because users will expect the editor to be embedded in the CellTable, but there are only a few cell editors available (EditTextCell, DatePickerCell, SelectionCell and CheckboxCell, and maybe another variant of text editing), but I've used this technique, and really, it's not too bad.

Upvotes: 2

Related Questions