How to Create a Basic TreeGrid using GXT(Ext GWT)

When you want to display hierarchical data tree grid will be the right choice for this. GXT TreeGrid is a very powerful UI component which provides us with some wonderful functionality like row editor, row number, widget render etc. Here i present you the way of creating a basic TreeGrid in detail.

Create a new project named GxtBasicTreeGrid 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 blogs about GXT TreePanel. And in the TestData class i have populated the data to build the TreeGrid. You will find the code for these classes here.

First create a root object named model of the Folder class from TestData.getTreeModel() method and create a TreeStore object,store from this model.
Folder model = TestData.getTreeModel();

TreeStore<ModelData> store = new TreeStore<ModelData>();
store.add(model.getChildren(), true);



Now define three ColumnConfig objects and create a ColumnModel from these objects.
ColumnConfig name = new ColumnConfig("name", "Name", 100);
name.setRenderer(new TreeGridCellRenderer<ModelData>());

 ColumnConfig salary = new ColumnConfig("salary", "Salary", 100);

 ColumnConfig date = new ColumnConfig("joiningdate", "Joining Date", 100);

 ColumnModel cm = new ColumnModel(Arrays.asList(name, salary, date));

Create a TreeGrid, treeGrid from the TreeStore, store and ColumnModel, cm. Then set some property of the treeGrid. Finally create a ContentPanel and add the treeGrid to this panel.
TreeGrid<ModelData> treeGrid = new TreeGrid<ModelData>(store, cm);
treeGrid.setBorders(true);
 treeGrid.getStyle().setLeafIcon(ICONS.user_add());
 treeGrid.setSize(400, 400); 
 treeGrid.setAutoExpandColumn("name");
 treeGrid.setTrackMouseOver(false);

 ContentPanel cp = new ContentPanel();
 cp.setBodyBorder(false);
 cp.setHeading("TreeGrid");
 cp.setButtonAlign(HorizontalAlignment.CENTER);
 cp.setLayout(new FitLayout());
 cp.setFrame(true);
 cp.setSize(600, 300);
 cp.add(treeGrid);
 RootPanel.get().add(cp);

Run the application and the output will be like this.

basicTreeGrid

To view the live demo of this tutorial Click here.

2 comments:

Andrew from NZ November 27, 2009 at 3:32 PM  

And another nice tutorial. Thank you. It is so nice to find tutorials that actually work. I have tried many over the years and mostly they fail.

One comment, the 'treeGrid.getStyle().setLeafIcon(ICONS.user_add());' lines gives me an error. If I comment it out everything is fine. Have I not included a resource somewhere?

Thanks for your work.

Unknown November 27, 2009 at 11:30 PM  

Here is my ExampleIcons class..
-----------------------------------package com.ratul.GxtContextMenuTree.client.icons;

import com.google.gwt.user.client.ui.AbstractImagePrototype;
import com.google.gwt.user.client.ui.ImageBundle;

public interface ExampleIcons extends ImageBundle {

@Resource("user_add.png")
AbstractImagePrototype user_add();

@Resource("add.gif")
AbstractImagePrototype add();

@Resource("delete.gif")
AbstractImagePrototype delete();

}

-----------------------------------
In your entry point class create ICONS object in this way.

public static final ExampleIcons ICONS = GWT.create(ExampleIcons.class);

visit gxtexamplegallery.appspot.com this to view the live demo of the tutorials..Thanks :-)

Total Pageviews

Tags

Twitter Updates
    follow me on Twitter

    Followers