How to do make grid search in grid in EXT GWT?

[Alka_5m1980]

Hi,

I have to implement search functionality in Grid, Is there any ideas or way to implement it, Can we inplement it using Javascript. i tried to integrate on example which is mentioned in the given link for Grid search http://gridsearch.extjs.eu .

Example which is created using EXT JS and i came to conclusion which is mentioned below:

1. ExtJS is JavaScript library which is used and supported by GWT-EXT.
2. Ext Gwt supports gwtext.jar.This jar require to use the feature of ExtJS.
3. Ext GWT not supporting ExtJS.

Please suggest me how to implement Grid Search Functionality in EXT GWT.

Thanks in advance.

[Ezor]

Just use the StoreFilterField Component and add it to your toolbar (or anywhere )

// Gestion des filtres
        StoreFilterField<BaseModel> filter = new StoreFilterField<BaseModel>() {
          @Override
          protected boolean doSelect(Store<BaseModel> store, BaseModel parent,
                  BaseModel record, String property, String filter) {
           
            String name = parent.get("name");
            name = name.toLowerCase();
            if (name.indexOf(filter.toLowerCase()) != -1) {
              return true;
            }
            return false;
          }
        };
        filter.setWidth(130);
       // Bind the filter field to your grid store (grid.getStore())
        filter.bind(store);

[FireGlow]

Can you post your code for grid?

Are you using a PageLoading ?

Do you only want to filter the already existing data (clientside), or do you want to filter it serverside?

[Alka_5m1980]

Q Can you post your code for grid?

CallType.java

package com.palm.idea.client.master;
import java.util.ArrayList;
import java.util.Date;
import java.util.Iterator;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.Style.SelectionMode;
import com.extjs.gxt.ui.client.binding.FormBinding;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.MenuEvent;
import com.extjs.gxt.ui.client.event.SelectionEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.DateWrapper;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.PagingToolBar;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.Field;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextArea;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
import com.extjs.gxt.ui.client.widget.layout.TableData;
import com.extjs.gxt.ui.client.widget.layout.TableLayout;
import com.extjs.gxt.ui.client.widget.menu.Menu;
import com.extjs.gxt.ui.client.widget.menu.MenuItem;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Widget;
import com.palm.idea.client.MasterServiceAsync;
import com.palm.idea.client.model.CallTypeBean;
public class CallType extends LayoutContainer {
private VerticalPanel vp;
ListStore store;
FormPanel panel = new FormPanel();
FormPanel panel3 = new FormPanel();

Grid grid;
TextField<String> tfCallType;
TextArea taDescription;
TextField<String> searchCode;
Button searchBtn;

final MasterServiceAsync sampleservice = (MasterServiceAsync) Registry
.get("sampleservice");
PagingToolBar toolBar= new PagingToolBar(25);;
ColumnConfig column;
private FormBinding formBindings;
ContentPanel cp;
ContentPanel contentPanel;

public CallType() {
vp = new VerticalPanel();
vp.setSpacing(5);
//vp.isMonitorWindowResize();
//vp.setLayout(new TableLayout());
}
@SuppressWarnings("unchecked")
@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);

setStyleAttribute("margin", "10px");
cp = new ContentPanel();

cp.setStyleAttribute("verdana", "20");
cp.setHeading("<h1>"+"Masters --> Call Type"+"</h1>");
//cp.setIconStyle("icon-table");
cp.setExpanded(true);
cp.setFrame(true);
cp.setSize(762, 453);
//cp.setLayout(new RowLayout(Orientation.HORIZONTAL));


contentPanel = new ContentPanel();
contentPanel.setHeaderVisible(false);
//contentPanel.setWidth(600);
contentPanel.setSize(750, 350);
contentPanel.setLayout(new RowLayout(Orientation.HORIZONTAL));

Grid grid = createCallTypeGrid();
cp.setBottomComponent(toolBar);
FormPanel panel = createCallTypeForm();
formBindings = new FormBinding(panel, true);
formBindings.setStore(grid.getStore());


FormPanel panel3= createSearchPanel();


cp.add(panel3);

//panel3.add(grid, new RowData(1, 1));
contentPanel.add(grid, new RowData(.55, 1));
contentPanel.add(panel, new RowData(.45, .5));

cp.add(contentPanel);
add(cp);
//vp.add(cp);
//add(vp);

}
private FormPanel createSearchPanel(){
panel3.setLayout(new RowLayout(Orientation.VERTICAL));
panel3.setHeaderVisible(false);

searchCode = new TextField<String>();
searchCode.setName("searchType");
searchCode.setItemId("searchType");
searchCode.setVisible(true);
searchCode.setAutoHeight(true);
searchCode.setAutoValidate(true);
searchCode.setAutoWidth(true);
panel3.add(searchCode);

searchBtn = new Button("<h4>"+"Search"+"</h4>", new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
//searchDataInGrid();
}
});

panel3.add(searchBtn);

return panel3;
}


private FormPanel createCallTypeForm() {
panel = new FormPanel();
panel.setLabelWidth(100);
//panel.setFrame(true);
panel.setButtonAlign(HorizontalAlignment.CENTER);
panel.setHeading("<h4>"+"Create Call Type"+"</h4>");
panel.setBorders(true);

tfCallType = new TextField<String>(){
@Override
public void setMaxLength(int m) {
super.setMaxLength(m);
if (rendered) {
getInputEl().setElementAttribute("maxLength", m);
}
}
@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
getInputEl().setElementAttribute("maxLength", getMaxLength());
}
};
tfCallType.setName("callType");
tfCallType.setFieldLabel("<HTML></HEAD><BODY><FONT SIZE='2'>Call Type</FONT></FONT><FONT COLOR='#FF0000'> * </FONT></BODY></HTML>");
tfCallType.setItemId("callType");
tfCallType.setAutoValidate(true);
tfCallType.setAutoWidth(true);
//tfCallType.setAllowBlank(false);
tfCallType.setSize(60, 20);
tfCallType.setWidth(35);
tfCallType.setMaxLength(10);
panel.add(tfCallType);

taDescription =new TextArea();
taDescription.setName("description");
taDescription.setFieldLabel("<HTML></HEAD><BODY><FONT SIZE='2'>Description</FONT></FONT><FONT COLOR='#FF0000'> * </FONT></BODY></HTML>");
taDescription.setItemId("description");
taDescription.setAutoValidate(true);
taDescription.setAutoWidth(true);
taDescription.setSize(60, 60);
taDescription.setMaxLength(100);
panel.add(taDescription);

Button addBtn = new Button("<h4>"+"Add"+"</h4>", new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
insertCallTypeGrid();
}
});
//addBtn.setIconStyle("icon-add");
panel.addButton(addBtn);

Button resetBtn=new Button("<h4>"+"Reset"+"</h4>", new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
tfCallType.reset();
taDescription.reset();
tfCallType.setAllowBlank(true);
}
});
panel.addButton(resetBtn);
panel.setHeight(400);
panel.setBorders(true);

return panel;
}

@SuppressWarnings("unchecked")
private Grid createCallTypeGrid() {

FlowLayout layout = new FlowLayout(10);
setLayout(layout);
RpcProxy proxy = getProxy();
// loader
BasePagingLoader loader = new BasePagingLoader(proxy);
loader.setRemoteSort(true);
loader.load(0, 25);
store = new ListStore(loader);
//toolBar = new PagingToolBar(25);
toolBar.bind(loader);
List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
column = new ColumnConfig();
column.setId("callType");
column.setHeader("<h5>"+"Call Type");
column.setWidth(100);
columns.add(column);

column = new ColumnConfig();
column.setId("description");
column.setHeader("<h5>"+"Description");
column.setWidth(150);
columns.add(column);

column = new ColumnConfig();
column.setId("modifyBy");
column.setHeader("<h5>"+"Modify By");
column.setWidth(100);
columns.add(column);

column = new ColumnConfig();
column.setId("modifyDate1");
column.setHeader("<h5>"+"Modify On");
column.setWidth(100);
columns.add(column);

ColumnModel cm = new ColumnModel(columns);
grid = new Grid(store, cm);
grid.setLoadMask(true);
grid.setHeight(400);
grid.setBorders(true);

return grid;
}
@SuppressWarnings("unchecked")
private RpcProxy getProxy() {
RpcProxy proxy = new RpcProxy() {
@Override
public void load(Object loadConfig, AsyncCallback callback) {
try {
sampleservice.getCallType1((PagingLoadConfig) loadConfig, callback);
} catch (Exception e) {
System.out.println("Inside load method:" + e);
}
}
};
return proxy;
}
private void insertCallTypeGrid() {
MasterServiceAsync masterServiceAsync = (MasterServiceAsync) Registry
.get("sampleservice");

Map data = getUserData();

String callType="";
String codedes="";

int duplicateFlag=1;
int duplicateFlag2=1;
int specialFlag1=1;
int specialFlag2=1;



if((data.get("callType") != null))
{
callType=data.get("callType").toString();
}
if((data.get("description") != null))
{
codedes=data.get("description").toString();
}

if( data.get("callType") == null )
{
MessageBox.info("Alert","Please enter Call Type", null);
}
else if( data.get("description") == null )
{
MessageBox.info("Alert","Please enter the Description", null);
}
else if( (data.get("callType").toString()).length() > 10 )
{
MessageBox.info("Alert","Max. Length of Call Type is 10", null);
}
else if( (data.get("description").toString()).length() > 100 )
{
MessageBox.info("Alert","Max. Length of Description is 100", null);
}
else if( (data.get("callType").toString()).contains("'")||(data.get("callType").toString()).contains("\"") )
{
MessageBox.info("Alert","Invalid Character !!! Call Type", null);
}
else if( (data.get("description").toString()).contains("'")||(data.get("description").toString()).contains("\"") )
{
MessageBox.info("Alert","Invalid Character !!! in Description", null);
}
else
{
//To check Duplicate code
if(specialFlag1==1)
{
for(int i=0;i<store.getCount();i++)
{
CallTypeBean srclist = (CallTypeBean) store.getAt(i);
if(callType.equalsIgnoreCase((String)srclist.get("callType")))
{
MessageBox.info("Alert","Call Type already exists", null);
duplicateFlag=0;
break;
}
}
}

if(duplicateFlag==1 && duplicateFlag2==1)
{
masterServiceAsync.addCallType1(data, callback);
MessageBox.info("Success", "Successfully Inserted Record ", null);
}
}

}

@SuppressWarnings("unchecked")
private Map getUserData() {
Map<String, Object> map = new LinkedHashMap<String, Object>();
List<Field> listcom = panel.getFields();
for (Iterator iterator = listcom.iterator(); iterator.hasNext() {
Field field = (Field) iterator.next();
Object obj = field.getValue();
String fieldName = field.getItemId().toString();
map.put(fieldName, obj);
}
return map;
}
final AsyncCallback callback = new AsyncCallback() {
public void onSuccess(Object result) {
toolBar.refresh();
tfCallType.reset();
taDescription.reset();
}
private Widget createFailedLoginPage() {
return null;
}
public void onFailure(Throwable caught) {
MessageBox.info("Error", "Error while logging in", null);
}
};
}



-------

Its ExampleServiceImpl.java class code is given below:

public PagingLoadResult<CallType> getcalltype(PagingLoadConfig config) {
List list = masterDAO.getcalltype();
List<CallType> contentList = new ArrayList<CallType>();
for (int i = 0; i < list.size(); i++) {
CallType contentNew = (CallType) list.get(i);
System.out.println();
contentList.add(new CallType(contentNew.getProviderName(),
contentNew.getClsDesc(),contentNew.getRevShare(), contentNew.getStart(), contentNew
.getEnd(), contentNew.getModBy(), contentNew
.getMdOn()));
}
if (config.getSortInfo().getSortField() != null) {
final String sortField = config.getSortInfo().getSortField();
if (sortField != null) {
Collections.sort(contentList, config.getSortInfo().getSortDir()
.comparator(new Comparator() {
publicint compare(Object o1, Object o2) {
CallType p1 = (CallType) o1;
CallType p2 = (CallType) o2;
if (sortField.equals("clsDesc")) {
return p1.get("clsDesc").toString().compareTo(p2.get("clsDesc").toString());
}elseif (sortField.equals("providerName")) {
return p1.get("providerName").toString().compareTo(p2.get("providerName").toString());
}elseif (sortField.equals("revShare")) {
return (p1.get("revShare").toString()).compareTo(p2.get("revShare").toString());
}elseif (sortField.equals("modBy")) {
return p1.get("modBy").toString().compareTo(p2.get("modBy").toString());
}
return 0;
}
}));
}
}

List<CallType> sublist = new ArrayList<CallType>();
int start = config.getOffset();
int limit = contentList.size();
if (config.getLimit() > 0) {
limit = Math.min(start + config.getLimit(), limit);
}
for (int i = config.getOffset(); i < limit; i++) {
sublist.add(contentList.get(i));
}
returnnew BasePagingLoadResult(sublist, config.getOffset(),
contentList.size());

}

Q Are you using a PageLoading ?
I'm using PageLoaderConfig


Q Do you only want to filter the already existing data (clientside), or do you want to filter it serverside?
Yes i want to filter already existing data(Clientside).

[FireGlow]

Clientside should work like Ezor wrote

[Alka_5m1980]

Hi,

Im unable to integrate Ezor Code in my Calltype.java ....

[FireGlow]

hm you can just copy & paste, where exactly is the problem ?

[Alka_5m1980]

Curently, I'm using PagingToolBar toolbar in which im trying to bind filter but when programs get starts, its not loading grid and also not showing any error.
please check below is the code fragment of CallType.java where i added this code.
private Grid createCallTypeGrid() {

StoreFilterField<BaseModel> filter = new StoreFilterField<BaseModel>() {

protected boolean doSelect(Store<BaseModel> store, BaseModel parent,
BaseModel record, String property, String filter) {

String callType = parent.get("callType");
callType = callType.toLowerCase();

if(callType.indexOf(filter.toLowerCase())!= -1 ){

return true;
}

return false;
}
};
filter.setWidth(130);
// Bind the filter field to your grid store (grid.getStore())
filter.bind(store);



FlowLayout layout = new FlowLayout(10);
setLayout(layout);
RpcProxy proxy = getProxy();
// loader
BasePagingLoader loader = new BasePagingLoader(proxy);
loader.setRemoteSort(true);
loader.load(0, 25);
store = new ListStore(loader);
//toolBar = new PagingToolBar(25);
toolBar.bind(loader);


toolBar.bind((PagingLoader) filter);

I have added the code which is in bold letter in CallType.java, Problem is its not showing any error as well loading blank screen(not loading grid).

[gtyagi_123]

Hi

I have a filter implementation exactly as suggested by Ezor and it works fine. the issue i have is with a tool tip i am using. I have a model processor as:

    private final ModelProcessor<SomeModel> modelProcessor = new ModelProcessor<SomeModel>() {

        @Override
        public SomeModel prepareData(SomeModel model) {
            String name = model.getName();
            model.set("shortName", Format.ellipse(name, 16));
            String toolTip = name + "\n\n" + model.getToolTip();
            model.set("toolTip", toolTip);
            return model;
        }

    };

The template

    private native String getTemplate() /*-{
        return ['<tpl for=".">',
        '<div class="thumb-wrap viewObject" id="view-{id}" style="border: 1px solid white">',
        '<div class="thumb"><img src="{iconPath}" align="center" title="{toolTip}"></div>',
        '<span class="objectName">{shortName}</span></div>',
        '</tpl>',
        '<div class="x-clear"></div>'].join("");
    }-*/;

The tool tip displays the name and a remark. The issue occurs when the user applies a filter on the grid. The name starts appearing in the tool tip multiple times and the number of time the name appears in the tool tip increases each time the filter is applied. The multiple names disappear when the grid is refreshed.
Any pointers would be appreciated.

Thanks
GT

[sven]

            String toolTip = name + "\n\n" + model.getToolTip();

You append the old tooltip each time.