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.setSize(400, 400); 

 ContentPanel cp = new ContentPanel();
 cp.setLayout(new FitLayout());
 cp.setSize(600, 300);

Run the application and the output will be like this.


To view the live demo of this tutorial Click here.


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;


public interface ExampleIcons extends ImageBundle {

AbstractImagePrototype user_add();

AbstractImagePrototype add();

AbstractImagePrototype delete();


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

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

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

Total Pageviews


Twitter Updates
    follow me on Twitter