Event handlers for Faces Client components

The Faces Client component event handlers allow you to define actions for specific events from Faces Client components; event handlers allow you to connect events from one Faces Client component to another Faces Client component and some Faces Components. You can also connect a Faces Client event to an HTML control or to any other custom logic that you may have in JavaScriptâ„¢.
Note: Some Faces Client Components and Client Data have been deprecated and are not recommended for use.
The following have been deprecated and are not recommended for use:
  • Client Data and its associated tooling (such as the Client Data view)
  • Faces Client Components
    • <odc:dataGrid> (Data Grid)
    • <odc:webService> (Web Service)
    • <odc:clientData>
    • <odc:clientBinder>

For example, assume that a Data Tree is used to display an organization, and each node of the data tree is a different department. Each department is a client data object, and the department name is an attribute. The name of each department is displayed as the nodes of the data tree. The client data object is created with a data grid and contains the names of the employees in a particular department. When a different department is highlighted in the data tree, that department is used as the root object for the data grid, which is refreshed to the show the employees of that department. Event handlers, defined in the Quick Edit view, allow for this interaction.

Note: Once an event handler has been selected, JavaScriptâ„¢ code must be entered in the right-hand pane of the Quick Edit view. This code will be the actions performed when an event, such as onhighlight, is called.

The following list includes Faces Client events that may appear in the left pane of the Quick Edit view for a particular Faces Client Component.

Data Tree

onhighlight
The onhighlight event is supported by the Data Grid and Data Tree components. It is fired when a row in the data grid or node in the data tree is highlighted or clicked on by the user. The event object has two properties
  • eobject - the object mapped to the highlighted row or node, for example, the department
  • propertyName - the name of the object property that the user clicked, for example, the department name (applicable only for the data tree).
onselect / onunselect
The onselect and onunselect events are supported by the Data Grid and Data Tree components. These events are fired when a user selects or deselects a check box for a node in the Data Tree or a row in the Data Grid or selects or deselects a radio button for a row in the Data Grid.
  • eobject - the object mapped to the currently selected or deselected row or node.
  • checkedItemsArray - the list objects of the currently selected rows or nodes, for example, the employee objects.
onnodehighlight
The onnodehighlight event is supported by the Data Tree component. It is fired when any node in the data tree is highlighted by the user. If a particular node already has an event handler for its onhighlight event, then that event handler will be called before this. The event object has two properties
  • eobject - the object mapped to the highlighted node, for example, the department
  • propertyName - the name of the object property that the user clicked, for example, the department name.
onnodeselect/onnodeunselect
The onnodeselect and onnodeunselect events are supported by the Data Tree component. These events are fired when any node in the data tree is selected or deselected. If a particular node already has an event handler for its onselect or onunselect event, then that event handler will be called before calling this. The event object has two properties
  • eobject - the object mapped to the currently selected or deselected node.
  • checkedItemsArray - the list objects of the currently selected nodes, for example, the employee objects.
onexpand
This event is fired when a particular node in the Data Tree is expanded. The event object has 3 properties.
  • eobject - this is the object mapped to the node on which the user clicked.
  • openedItemsArray - this is an array containing the eobjects which represent all the currently expanded nodes in the data tree.
  • levels - this is an integer indicating the number of levels being expanded. If the value is -1, then all the nodes under the current node being expanded will be expanded as well. If the value is the 1, then only the node that is clicked will be expanded.
oncollapse
This event is fired when a particular node in the Data Tree is collapsed. The event object has 3 properties.
  • eobject - this is the object mapped to the node on which the user clicked.
  • openedItemsArray - this is an array containing the eobjects which represent all the currently expanded nodes in the data tree.
  • levels - this is an integer indicating the number of levels being collapsed. If the value is -1, then all the nodes under the current node being collapsed will be collapsed as well. If the value is the 1, then only the node that is clicked will be collapsed.
onnodeexpand
This event is fired when any node in the Data Tree is expanded. If the data tree node on which this event is fired already has a handler for its onexpand event, then that will be called before the this handler. The event object has 3 properties.
  • eobject - this is the object mapped to the node on which the user clicked.
  • openedItemsArray - this is an array containing the eobjects which represent all the currently expanded nodes in the data tree.
  • levels - this is an integer indicating the number of levels being expanded. If the value is -1, then all the nodes under the current node being expanded will be expanded as well. If the value is the 1, then only the node that is clicked will be expanded.
onnodecollapse
This event is fired when any node in the Data Tree is collapsed. If the data tree node that is being collapsed already has a handler for its oncollapse event, then that will be called before this handler. The event object has 3 properties.
  • eobject - this is the object mapped to the node that the user clicked on.
  • openedItemsArray - this is an array containing the eobjects which represent all the currently expanded nodes in the data tree.
  • levels - this is an integer indicating the number of levels being collapsed. If the value is -1, then all the nodes under the current node being collapsed will be collapsed as well. If the value is the 1, then only the node that is clicked will be collapsed.

For more information on eObject, refer to Chapter 6: JavaScript Library in FacesClient Components Developer's Guide.

Data Grid

onhighlight
The onhighlight event is supported by the Data Grid and Data Tree components. It is fired when a row in the data grid or node in the data tree is highlighted or clicked on by the user. The event object has two properties
  • eobject - the object mapped to the highlighted row or node, for example, the department
  • propertyName - the name of the object property that the user clicked, for example, the department name (applicable only for the data tree).
onselect / onunselect
The onselect and onunselect events are supported by the Data Grid and Data Tree components. These events are fired when a user selects or deselects a check box for a node in the Data Tree or a row in the Data Grid or selects or deselects a radio button for a row in the Data Grid.
  • eobject - the object mapped to the currently selected or deselected row or node.
  • checkedItemsArray - the list objects of the currently selected rows or nodes, for example, the employee objects.
onnodeselect/onnodeunselect
The onnodeselect and onnodeunselect events are supported by the Data Grid and Data Tree components. These events are fired when any node in the data tree is selected or deselected. If a particular node already has an event handler for its onselect or onunselect event, then that event handler will be called before calling this. The event object has two properties
  • eobject - the object mapped to the currently selected or deselected node.
  • checkedItemsArray - the list objects of the currently selected nodes, for example, the employee objects.
onfilter
The onfilter event is fired when the Data Grid is filtering out the data using the Row Filter expression in the Properties View of the Data Grid supplied by the user. This event object has one property
  • filterExpression - this is the JavaScript expression that the user supplied to filter the data
onpage
The onpage event is fired when the user pages between the different pages in the Data Grid. The event object has two properties.
  • pageSelectChoice - the value of this property tells the user whether he or she navigated to the next, previous, first, or last page, or jumped to a particular page by specifying the page number. Accordingly, the values for this property will be next, previous, first, last, or jump.
  • pageStartIndex - the value of this property tells you the index of the first item displayed on that page. For example, if the user is displaying 5 items per page and jumps to the second page, then the value for this property will be 6.
onsort
This event is fired when the user clicks on one of the columns in the Data Grid to sort it. The event object has two properties.
  • sortOrder - the value of this property tells the user whether the sorting is ascending or descending. Accordingly, the values for this property will be asc or desc.
  • propertyName - the value of this property is the name of the bean property that is used to display the value in the column being sorted.
onselectall
This event is fired by the Data Grid when the user chooses to select all the rows in the grid, but it is only fired on a Data Grid that has the selection column. The event object has two properties.
  • allEobjs - this is the array of all the objects currently bound to the Data Grid. For example, if the Data Grid is displaying a list of departments, then each item in the array will be a department object.
  • toBeSelectEobjs - this is an array of objects in the Data Grid that are going to be selected as a result of calling the select all action.
onunselectall
This event is fired by the Data Grid when the user chooses to deselect all the rows in the grid, but it is only fired on a Data Grid that has a selection column. The event object has two properties.
  • allEobjs - this is the array of all the objects currently bound to the Data Grid. For example, if the Data Grid is displaying a list of departments, then each item in the array will be a department object.
  • toBeUnselectedEobjs - this is an array of objects in the Data Grid that are going to be deselected as a result of calling the deselect all action.
Note: If including string variables in your parameters for the handler attribute, be sure that all quotes are properly escaped.
Related tasks
Creating event handlers for data tree
Creating event handlers for data grid
Related reference
Supported controls

Feedback