Add Context Menu with GXT(Ext GWT) TreePanel

Context Menu is frequently used with tree if you want to present a very user friendly interface to user like add,delete or enable,disable a tree node. Here i show you how you can add a context menu with add and delete menu items with GXT TreePanel very easily.
Create a new project named GxtContextMenuTree 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 related to GXT TreePanel. And in the TestData class i have populated the data to build the tree. You will find the code for these classes here.  Create a new package model under the client package and place the EmployeeTreeNode and Folder class there.



Now remove all the auto generated code from the GxtContextMenuTree class which is the entry point class of your project.  Go to the onModuleLoad  method of the class and first create a root node of the tree. Then create a TreeStore, store and add data to this store from the root node. Now create a TreePanel, tree from this store and set some property of the tree.
final Folder rootNode = TestData.getTreeModel();

final TreeStore<ModelData> store = new TreeStore<ModelData>();
store.add((List) rootNode.getChildren(), true);

final TreePanel<ModelData> tree = new TreePanel<ModelData>(store);
tree.setDisplayProperty("name");
tree.getStyle().setLeafIcon(ICONS.user_add());
tree.setWidth(250);


Now create a gxt Menu and add two MenuItem insert and remove with the menu.
Menu contextMenu = new Menu();
contextMenu.setWidth(140);

MenuItem insert = new MenuItem();
insert.setText("Insert Item");
insert.setIcon(ICONS.add());
contextMenu.add(insert);

MenuItem remove = new MenuItem();
remove.setText("Remove Selected");
remove.setIcon(ICONS.delete());
contextMenu.add(remove);

What you want to do by clicking on these menu items, just write them in the addSelectionListener method of the MenuItem. Then set the menu to the tree as a context menu by setContextMenu method of the TreePanel.
insert.addSelectionListener(new SelectionListener<MenuEvent>() {
public void componentSelected(MenuEvent ce) {
ModelData folder = tree.getSelectionModel().getSelectedItem();
if (folder != null) {
Folder child = new Folder("Add Child " + count++);
store.add(folder, child, false);
tree.setExpanded(folder, true);
}
}
});

remove.addSelectionListener(new SelectionListener<MenuEvent>() {
public void componentSelected(MenuEvent ce) {
List<ModelData> selected = tree.getSelectionModel().getSelectedItems();
for (ModelData sel : selected) 
{
store.remove(sel);
}
}
});

tree.setContextMenu(contextMenu);
RootPanel.get().add(tree);

In the addSelectionListener method of the insert menu item i have written the code for adding a Folder node with the selected node and in the same method of the remove menu item code for removing a list of selected nodes. To view the live demo of this tutorial Click here.

contextMenuTree

7 comments:

amjed November 17, 2009 at 12:08 AM  

ICONS looks like the ImagesBundle ?

Unknown November 17, 2009 at 7:15 PM  

Yes ICONS is a ImageBundle..

Mallikarjun February 21, 2011 at 8:52 AM  

Hi Zawoad
My requirement is to add listener to tree which can fires event with up down keys and mouse keys.
what is the event type for this one??
Events.Select & SelectionChange is not working..

How can i achieve this one..?

thank u..

Unknown April 12, 2011 at 11:41 PM  
This comment has been removed by the author.
Unknown April 12, 2011 at 11:48 PM  

Hi,

I would like to add to folder items the context menu "View, Refresh" and to the leaf items the context menu "Update, Delete". Do you have any idea on how to do it?

Cheers,
Yanis

VRSukla January 4, 2012 at 1:28 AM  

sampleTree.addListener(Events.OnMouseDown,
new Listener>()
{
public void handleEvent(TreePanelEvent be)
{
Event e = be.getEvent();
if (DOM.eventGetButton(e) == e.BUTTON_RIGHT)
{
BaseTreeModel model = be.getItem();
currentNode = be.getNode();
hierarchyTree.setContextMenu(contextMenu);
for (MenuItem item : menuItems)
{
item.hide();
}

if (model.isLeaf())
{
addNode.show();
}
else
{
validateHier.show();
publishHier.show();
removeHier.show();
}
}
}
});
}

Unknown September 25, 2015 at 3:46 PM  

Hi help me and show me how to add a context menu a grid sencha gxt. thank u

Total Pageviews

Tags

Twitter Updates
    follow me on Twitter

    Followers