Add Filter Functionality with GXT(Ext GWT) TreePanel

In my previous blog i have articulated how you can create a basic tree using the GXT TreePanel. In the next few blogs i will try to write about some marvelous features which can be easily integrated with TreePanel. Here i state how to add filter functionality with TreePanel.

Create a new project named GxtFilterTree and add GXT library in the project. The tree node objects must possess the functionality of BaseTreeModel of GXT. I have used the same EmployeeTreeNode and Folder class for leaf and parent nodes that i used in my previous blog. And in the TestData class i have populated the data to build the tree. You will find the code for these classes here.

Go to the onModuleLoad method of GxtFilterTree class. Remove all the auto generated code of this method. Now create a TreeLoader, loader.

TreeLoader<ModelData> loader = new BaseTreeLoader<ModelData>(
  new TreeModelReader<List<ModelData>>());

BaseTreeLoader is default implementation of the TreeLoader interface which also extends the functionality of BaseLoader. Then create TreeStore, store by using the loader and create a TreePanel, tree with the store. Pass the root of the tree to the loader.load method as a load configuration which loads data using the configuration. You can get the root node from getTreeModel method of TestData class.




TreeStore<ModelData> store = new TreeStore<ModelData>(loader);
TreePanel<ModelData> tree = new TreePanel<ModelData>(store);
tree.setAutoLoad(true);
tree.setDisplayProperty("name");
tree.setWidth(250);
tree.setIconProvider(new ModelIconProvider<ModelData>() {
  public AbstractImagePrototype getIcon(ModelData model) {
    if (((TreeModel) model).isLeaf()) {
      return ICONS.user_add();
    }
    return null;
  }
});
loader.load(TestData.getTreeModel());

setAutoLoad method sets whether all children should automatically be loaded recursively. Other setter methods of TreePanel are self explanatory.

Now the time for creating a StoreFilterField and bind this to the store.
StoreFilterField<ModelData> filter = new StoreFilterField<ModelData>() {
  @Override
  protected boolean doSelect(Store<ModelData> store,
  ModelData parent, ModelData record, String property,
  String filter) {
    // only match leaf nodes
    if (record instanceof Folder) { 
      return false;
    }
    String name = record.get("name");
    name = name.toLowerCase();
    if (name.startsWith(filter.toLowerCase())) {
      return true;
    }
    return false;
  }
};
filter.bind(store);

StoreFilterField can filter any Store implementation. You just have to implement the doSelect method this class. Here i have matched only the leaf node.

You are just one step behind to run the application. Create a panel to add the filter and the tree and add that panel to the RootPanel. That’s all. Run the application and check the filter functionality.
VerticalPanel panel = new VerticalPanel();
panel.addStyleName("x-small-editor");
panel.setSpacing(8);
panel.add(new Html("<span class=text>Enter a search string such as 'dirk'</span>"));
panel.add(filter);
panel.add(tree);
RootPanel.get().add(panel);

}
To view the live demo of this tutorial Click here.

treeWithFilterFunc

12 comments:

Purpose December 10, 2009 at 1:19 PM  

Great job Shams and very helpful. Have you done any work with the GXT tree drag and drop functionality? Trying to figure out how to identify the node target after dropping the leaf.

Unknown December 10, 2009 at 11:46 PM  

Sorry Purpose, i have not yet worked with GXT Tree Drag and Drop functionality. But if i will work with it i will definitely share with you. Thanks.

Anonymous December 29, 2010 at 10:03 AM  

can you add checkboxes as a means of selecting items from the leaf of a tree to dislay in a display area

Unknown December 30, 2010 at 1:32 AM  

Try with tree.setCheckable(true);

Unknown February 7, 2011 at 1:52 AM  

I need to load children dynamically i.e on demand loading of children.

How to achieve that using tree loader or any other idea??


thanks in advance..

Unknown February 7, 2011 at 2:06 AM  

@Mallikarjun: use RpcProxy and TreeLoader. Also setStateful(true) if you want to see the expanded nodes as it were after refreshing the browser

Unknown February 8, 2011 at 10:05 PM  

Thanks..
How can i keep tree panel in masking state until it loads from server..(At initial loading)

Unknown February 8, 2011 at 10:17 PM  

You can use the Status widget

set October 17, 2011 at 12:58 PM  

hello
how can put a event enter(onkeypress) in a control of a treepanel, because i try with a event onclick and ok but in a other no.

Vishal August 21, 2012 at 4:45 AM  

Hi Shams,nice tutorial.Please provide me the link to download gxt.jar.

Unknown November 2, 2012 at 12:08 AM  

this is a good tutorial, for filtering,

but could you help me out in having to search the leafnodes on click of a button.

or can we implemtnt this without usign StoreFilterField ?

how to Expand only matched node and its parents

Murad Iqbal November 17, 2012 at 5:25 AM  

Hi Shams, this is a wonderful tutorial. I have followed your steps in creating StoreFilterField for filtering tree data, but I am not able to type in the textbox of the storefilterfield. After trying 4-5 times I am able to type one character. I would appreciate if you can help me iwth this. Thanks a lot.

Total Pageviews

Tags

Twitter Updates
    follow me on Twitter

    Followers