Control the deletion of some selected nodes in a JSF application

Article ID: 2392
Last updated: 29 May, 2018
Article ID: 2392
Last updated: 29 May, 2018
Revision: 3
Views: 632
Posted: 13 Feb, 2012
by Dean J.
Updated: 29 May, 2018
by Gargani A.


How to control the deletion of some selected nodes in a JSF application?


In JSF, you can do a performJSFAction to invoke a method in the backend bean of your application to delete the selected objects. You can have a Javascript function that calls the performJSFAction:

function deleteSelNodes() {

    diagrammer.performJSFAction("#{editingBean.deleteSelectedNodes}", null, true);


"diagrammer" is the id of the "jvdf:diagrammerView" JSF tag in your JSP page.

The first parameter of performJSFAction is the method that will be invoked in your backend bean. Therefore, in your backend bean, you need a method that takes in an IlvDiagrammer instance and an array of action parameters. In this method, you will determine which selected nodes should be deleted. In the following example, all the selected nodes will be deleted except for the node with an ID of "workflow4".

public void deleteSelectedNodes (IlvDiagrammer diagrammer, String[] params) {

     Iterator it = diagrammer.getSelectedObjects();

     while (it.hasNext()) {

        IlvDefaultSDMNode node = (IlvDefaultSDMNode);

        if (node.getID().compareTo("workflow4") == 0) {

            diagrammer.setSelected(node, false);





The second parameter of performJSFAction is an array of Strings that will be passed into the second parameter (String[]) of your backend bean method. The third parameter indicates whether the action is affecting the capabilities (for example, the manager bounds or the layer list). For more details, please refer to the performJSFAction of IlvDiagrammerViewProxy in the JavaScript API documentation.

In your JSP page, the JavaScript function described above can be invoked when a button is clicked like through an onclick event handler or when the delete key is pressed.

If you are using a panelGrid that wraps around the diagrammer view similar to the "jsf-diagrammer-editing" sample, you can use its onkeydown event handler to detect when a key has been pressed down and invoke the Javascript function to detect the delete key. You can detect when the delete key has been pressed with the following Javascript function:

function deleteSelNodesByKey(e){

  var eventObj;


     eventObj = window.event; // IE


     eventObj = e; // Firefox and other browsers.

  // Note: IE can use keyCode property for onkeydown, onkeyup, and onkeypress.

  // Firefox can only use keyCode property for onkeydown and onkeyup.

  if(eventObj.keyCode == 46)



Note: If you are using a select interactor (jvdf:selectInteractor), make sure the deletionAllowed attribute is set to false or remove it completely as the default value for this attribute is already false. This will disable the default deletion behavior handled by the select interactor which is delete all selected objects.

Attached is a modified version of the "jsf-diagrammer-editing" sample that demonstrates this technique:

The sample is located in "<JVIEWS-DIAGRAMMER-INSTALL>/samples/diagrammer/". You can replace the sample's files with these ones. While the same concept will works with older version, please note however that this sample has been designed for version 8.7 and above.

This article was:   Helpful | Not helpful
Report an issue
Article ID: 2392
Last updated: 29 May, 2018
Revision: 3
Views: 632
Posted: 13 Feb, 2012 by Dean J.
Updated: 29 May, 2018 by Gargani A.
Attached files

Also listed in

Others in this category