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.