How to apply like search on GWT cell table?

Question

I am using GWT 2.3.I which I am using GWT cell table. Here below is the code for my cell table:

public class FormGrid extends SuperGrid {

List<Form> formList;


@Override
public void setColumns(CellTable table) {
    TextColumn<Form> nameColumn = new TextColumn<Form>() {
        @Override
        public String getValue(Form object) {
            return object.getName();
        }
    };
    table.addColumn(nameColumn, "Name");
}

@Override
public void setData() {
    if (formList != null && formList.size() > 0) {
        AsyncDataProvider<Form> provider = new AsyncDataProvider<Form>() {
            @Override
            protected void onRangeChanged(HasData<Form> display) {
                int start = display.getVisibleRange().getStart();
                int end = start + display.getVisibleRange().getLength();
                end = end >= formList.size() ? formList.size() : end;
                List<Form> sub = formList.subList(start, end);
                updateRowData(start, sub);
            }
        };
        provider.addDataDisplay(getTable());
        provider.updateRowCount(formList.size(), true);
    }
}

public List<Form> getFormList() {
    return formList;
}

public void setFormList(List<Form> formList) {
    this.formList = formList;
}

}

In this my set column and set data will be called fro super class flow.This cell table is working fine. Now I want to put a filter type facility (like search) in this cell table.It should be like, there is a texbox above the cell table and what ever written in that text box, it should fire a like query to all form name for that text box value.

for example I have 1000 form in the grid.Now if user writes 'app' in some filter textbox above the cell table the all the form which have 'app' in there name will be filtered and grid has only those forms only.

This is the first case:

Another case is I am only render one column in grid name.I have two more properties in form (description,tag).But I am not rendering them.now for filter if user writes 'app' in filter box then it should make a query to all three (name, description, and tag) and should return if 'app' matched to any of three.

I am not getting how to apply filter in cell table. Please help me out.Thanks in advance.

Answer 1

You can find an implementation in the expenses sample.

Here is a short summary of the steps

1.) Create a Textbox and a SearchButton.
2.) add a clickHandler to the SearchButton (You can also add KeyUpHandler to the Textbox alternatively)

searchButton.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
        search();
    }
});

3.) In the search function retrieve the searchString and store it.

private void search() {
    searchString = searchBox.getText();
    setData();
  }

4.) modify your setdata() function to take searchString into account

@Override
public void setData() {
    if (formList != null && formList.size() > 0) {
        AsyncDataProvider<Form> provider = new AsyncDataProvider<Form>() {
            @Override
            protected void onRangeChanged(HasData<Form> display) {
                int start = display.getVisibleRange().getStart();
                int end = start + display.getVisibleRange().getLength();
                //new function if searchString is specified take into account
                List<Form> sub = getSubList(start,end);
                end = end >= sub.size() ? sub.size() : end;
                updateRowData(sub.subList(start, end);, sub);
            }
        };
        provider.addDataDisplay(getTable());
        provider.updateRowCount(formList.size(), true);
    }
}

private List<Form> getSubList(int start, int end) {
    List<Form> filtered_list = null;
    if (searchString != null) {
        filtered_list= new ArrayList<Form>();
        for (Form form : formList) {
            if (form.getName().equals(searchString) || form.getTag().equals(searchString) || form.getDescription().equals(searchString))
                filtered_list.add(form);                
        }
    }
    else 
        filtered_list = formList;
   return filtered_list;
}

Answer 2

can propose another solution what can be used quite easy multiple times. Idea is to create custom provider for your celltable. GWT celltable filtering

Video in this post shows it in action.

Here is the part of code of custom list data provider which u have to implement.

    @Override  
protected void updateRowData(HasData display, int start, List values) {  
    if (!hasFilter() || filter == null) { // we don't need to filter, so call base class  
        super.updateRowData(display, start, values);  
    } else {  
        int end = start + values.size();  
        Range range = display.getVisibleRange();  
        int curStart = range.getStart();  
        int curLength = range.getLength();  
        int curEnd = curStart + curLength;  
        if (start == curStart || (curStart < end && curEnd > start)) {  
            int realStart = curStart < start ? start : curStart;  
            int realEnd = curEnd > end ? end : curEnd;  
            int realLength = realEnd - realStart;  
            List<t> resulted = new ArrayList<t>(realLength);  
            for (int i = realStart - start; i < realStart - start + realLength; i++) {  
                if (filter.isValid((T) values.get(i), getFilter())) {  
                    resulted.add((T) values.get(i));  
                }  
            }  
            display.setRowData(realStart, resulted);  
            display.setRowCount(resulted.size());  
        }  
    }  
}