Editable TreeGrid

[dbscott525]

I followed the example in the Showcase that shows an editable TreeGrid.

Here’s my code:

ResultTree tree = new ResultTree();
tree.setDataSource(new Conversation().getDataSource());
tree.setModelType(TreeModelType.PARENT);
tree.setID("ID");
tree.setParentIdField("Category");
tree.setRootValue(1);
tree.setIsFolderProperty("IsFolder");

setLoadDataOnDemand(false);
setNodeIcon(Images.CONVERSATION_LEAF.getFileName());
setFolderIcon(Images.CONVERSATION_FOLDER.getFileName());
setData(tree);
setCanEdit(true);
setAutoFetchData(true);
setCanFreezeFields(true);
setCanReparentNodes(true);
setAnimateFolders(true);
setAnimateFolderSpeed(100);

However, this does not produce the same results for me as show in the showcase. When I double click on a node it doesn’t make it editable.

[Isomorphic]

Since the Showcase sample is fine, what we need is a complete, runnable test case in order to be able to help you troubleshoot.

[dbscott525]

Since the Showcase sample is fine, what we need is a complete, runnable test case in order to be able to help you troubleshoot.

This test case loads data from a MySQL database so I’m not sure how much of the application you need. For example:

Do you need a dump of the table from MySQL?

Do you need the data source XML file?

Do you need the server.properties file?

Do you need gwt.xml file?

As I’m sure you’re aware it’s not a simple task to set up a complete application with database connection, etc. so it would be helpful for me to understand exactly what files you need to reproduce this.

[Isomorphic]

Same thing we always need: a minimal, runnable test case. Obviously, there's nothing we can do with an isolated snippet of code, which matches working Showcase code, and no other information.

It's actually quite trivial to set up a complete application with SQL connection, because that's one of the sample projects and importing it into Eclipse is just one step. But typically the approach taken is to use a clientOnly DataSource to simplify things.

Finally, another approach is to provide all the diagnostics that forums prompts you for. Then we would have at least a *chance* of being able to spot something without needing runnable code.

[dbscott525]

Test Case for Editable TreeGrid

This is a stand-alone example taken from the showcase with an added call to the setCanEdit and the setEditEvent methods. It doesn’t depend on any external data sources. In the code I use the setCanEdit and setEditEvent methods as follows:

employeeTreeGrid.setEditEvent(ListGridEditEvent.DOUBLECLICK);
employeeTreeGrid.setCanEdit(true);

Here is the full set of code:

Tree employeeTree = new Tree();
employeeTree.setModelType(TreeModelType.PARENT);
employeeTree.setRootValue(1);
employeeTree.setNameProperty("Name");
employeeTree.setIdField("EmployeeId");
employeeTree.setParentIdField("ReportsTo");
employeeTree.setOpenProperty("isOpen");
employeeTree.setData(employeeData);

TreeGrid employeeTreeGrid = new TreeGrid();

employeeTreeGrid.setWidth(500);
employeeTreeGrid.setHeight(400);
employeeTreeGrid.setCanReorderRecords(true);
employeeTreeGrid.setCanAcceptDroppedRecords(true);
employeeTreeGrid.setShowOpenIcons(false);
employeeTreeGrid.setDropIconSuffix("into");
employeeTreeGrid.setClosedIconSuffix("");
employeeTreeGrid.setData(employeeTree);
employeeTreeGrid.setEditEvent(ListGridEditEvent.DOUBLECLICK);
employeeTreeGrid.setCanEdit(true);

employeeTreeGrid.draw();

public static final TreeNode[] employeeData = new TreeNode[] {
new EmployeeTreeNode("4", "1", "Charles Madigen","Chief Operating Officer", true),
new EmployeeTreeNode("189", "4", "Gene Porter","Mgr Tech Plng IntIS T", false),
new EmployeeTreeNode("265", "189", "Olivier Doucet","Asset Spec Lines Stns", false),
new EmployeeTreeNode("264", "189", "Cheryl Pearson", "Dsl Sys Rep",false),
new EmployeeTreeNode("263", "189", "Priya Sambhus", "Line Wrker A",false),
new EmployeeTreeNode("188", "4", "Rogine Leger", "Mgr Syst P P",true),
new EmployeeTreeNode("262", "188", "Jacques Desautels","Line Wrker A", false),
new EmployeeTreeNode("261", "188", "Kay Monroe", "Stn Opr", false),
new EmployeeTreeNode("260", "188", "Francine Dugas","Fire Sec Off", false),
new EmployeeTreeNode("259", "188", "Jacques Leblanc", "Purch Clk",false),
new EmployeeTreeNode("258", "188", "Ren Xian", "Mobile Eq Opr",false),
new EmployeeTreeNode("257", "188", "Olivier Hebert","Met Read/Coll", false),
new EmployeeTreeNode("182", "4", "Tamara Kane","Mgr Site Services", false),
new EmployeeTreeNode("195", "182", "Kai Kong", "Stores Worker",false),
new EmployeeTreeNode("194", "182", "Felicia Piper", "Dsl Sys Rep",false),
new EmployeeTreeNode("193", "182", "Darcy Feeney", "Inventory Ck",false) };

public static class EmployeeTreeNode extends TreeNode {
public EmployeeTreeNode(String employeeId, String reportsTo,
String name, String job, boolean isOpen) {
setAttribute("EmployeeId", employeeId);
setAttribute("ReportsTo", reportsTo);
setAttribute("Name", name);
setAttribute("Job", job);
setAttribute("isOpen", isOpen);
}
}

[Isomorphic]

The issue here is twofold - the auto-generated TreeField column is non editable by default (it displays the result of a getTitle() call on the tree so potentially editing would have unexpected consequences), and the Tree name field is non editable as that could cause odd behaviors with the "path" of nodes.
This is covered in the docs here.

You can get this working by explicitly declaring your own treeField for the grid, and avoiding setting the "name" property on the tree to match the field you want to edit:

		Tree employeeTree = new Tree();
		employeeTree.setModelType(TreeModelType.PARENT);
		employeeTree.setRootValue(1);
		employeeTree.setIdField("EmployeeId");
		employeeTree.setParentIdField("ReportsTo");
		employeeTree.setOpenProperty("isOpen");
		employeeTree.setData(employeeData);

		TreeGrid employeeTreeGrid = new TreeGrid();
		
		TreeGridField field = new TreeGridField();
		field.setName("Name");
		field.setTreeField(true);
		employeeTreeGrid.setFields(field);

Regards
Isomorphic Software