How to Create an Editable TreeGrid in GXT(Ext GWT)

In our project I need to add the editable functionality with the GXT TreeGrid. Here I am going to share my experience about how to create an editable TreeGrid.

You may have already known that to build a TreeGrid 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.
(If you are new in GWT and GXT read my blogs about creating a new project in gwt and add GXT library)

First create a root object named model of the Folder class from TestData.getTreeModel() method.

Folder model = TestData.getTreeModel();

Then create a TreeStore object,store from this model and add data to the store

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

Now the time for defining ColumnConfig objects. First create a ColumnConfig, name and set a TextField as the editor of this object.

ColumnConfig name = new ColumnConfig("name", "Name", 100);
name.setRenderer(new TreeGridCellRenderer<ModelData>());
TextField<String> text = new TextField<String>();
text.setAllowBlank(false);
name.setEditor(new CellEditor(text));

The second column is the salary column so you can set a NumberField as the editor for this column.

ColumnConfig salary = new ColumnConfig("salary", "Salary", 100);
salary.setEditor(new CellEditor(new NumberField()));

In my example the third column is the joining date column. So you have to set a DateField as the editor for this column. For this first create a DateField object dateField and set the display format of the field. Then create a ColumnConfig object date and set the dateField as the editor of the date.

DateField dateField = new DateField();  
dateField.getPropertyEditor().setFormat(DateTimeFormat.getFormat("MM/dd/y"));
     
ColumnConfig date = new ColumnConfig("joiningdate", "Joining Date", 100); 
date.setAlignment(HorizontalAlignment.RIGHT);
date.setEditor(new CellEditor(dateField));  
date.setDateTimeFormat(DateTimeFormat.getMediumDateFormat());

Now create a ColumnModel from these three ColumnConfig objects.

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

From the ColumnModel and TreeStore create an EditorTreeGrid object and set some property of the object.

EditorTreeGrid<ModelData> editorTreeGrid = new EditorTreeGrid<ModelData>(store,cm);
editorTreeGrid.setClicksToEdit(ClicksToEdit.TWO);
editorTreeGrid.setBorders(true);
editorTreeGrid.setSize(400, 400);
editorTreeGrid.setAutoExpandColumn("name");
editorTreeGrid.setTrackMouseOver(false);

The setter methods are self explanatory.

Finally create a ContentPanel and add the editorTreeGrid in this panel.

ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("Cell TreeGrid Editing (2-Clicks)");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setFrame(true);
cp.setSize(600, 300);
cp.add(editorTreeGrid);
RootPanel.get().add(cp);

To view the live demo of this tutorial Click here.
The output will be like this