Monday, September 21, 2015

ADF: af:tree custom context menu using selected row values

When you right click on a tree node you can see a context menu with some options like expand or collapse a node or all nodes. You can also add a custom options easily by using contextMenu facet. I am going to show you how to add a custom context menu and use selected node values in the options label.
You can download this example from my Github repository.

To create the tree structure that we will use in this example we are going to use Employees table of hr schema.
We should have this structure in the data model.

After we have our views added to the application module, we have to drag and drop EmployeesView1 from the datacontrol palette.

The next step is to add the children in the tree binding so we click on the add green button and select 'EmployeeView'.

We are only going to use one attribute, but you can add as many as you want.

After clicking 'Ok' in the dialog we can add a custom contextmenu by adding a component structure like this:

If you run the application you can see 'MenuOption 1' in the context menu.

Now that we have our custom option in the context menu, We can try to add #{node.FirstName} in the text property os the commandMenuItem.

As you can see the new option is still in the context menu, but no name is displayed.

To achieve this we have to use a setPropertyListener with a popupFetch to store the value that we want to show in a variable.
This variable has to be at least in viewScope.
contentDelivery property of the popup has to be set to 'lazyUncached'.

If you run the application again you can see that the option now displays the name of the selected node properly.

Update 25/09/2015; 

There is a issue while trying to open the contextual menu clicking one node while you have already have a contextual menu opened. Some times it will not open.

It can be fixed by adding contextMenuSelect="false" in your af:tree

No comments:

Post a Comment