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.



To view the live demo of this tutorial Click here.