Event Handlers
Faces Client Component event handlers allow one 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.
For example, assume that a Tree View is used to display an organization, and each node of the 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 tree. The Data Grid contains the names of the employees in a particular department. When a different department is highlighted in the 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.
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.
Tree View
- onhighlight
- The onhighlight event is supported by the Data Grid and Tree View components. It is fired when a row in the data grid or node in the 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 tree view).
- onselect / onunselect
- The onselect and onunselect events are supported by the Data Grid and Tree View components. These events are fired when a user selects or deselects a check box for a node in the Tree View 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 Tree View component. It is fired when any node in the 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 Tree View component. These events are fired when any node in the 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 Tree View 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 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 Tree View 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 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 Tree View is expanded. If the 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 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 Tree View is collapsed. If the 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 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.
Data Grid
- onhighlight
- The onhighlight event is supported by the Data Grid and Tree View components. It is fired when a row in the data grid or node in the 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 tree view).
- onselect / onunselect
- The onselect and onunselect events are supported by the Data Grid and Tree View components. These events are fired when a user selects or deselects a check box for a node in the Tree View 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 Tree View components. These events are fired when any node in the 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 unselected as a result of calling the unselect all action.
Note: If including string variables in your parameters for the handler attribute, be sure that all quotes are properly escaped.