Friday, May 23, 2014

AutoSelect & Deselect Checkbox in ADF Tree Component

This post is about how to implement a use case having checkboxes in ADF Tree component. Below is the use case :

Use Case
There is an ADF Tree component using Departments as master and Employees as child. Departments acts as parent node and has all the child employees under it in the Tree. Departments as well as child employees should have checkbox. When user checks the checkbox of a department , all the checkboxes of the child employees should be autoselected. And when user deselects the department, they should be deselected.



So lets get started to implement this.

Created a Fusion application. Created Model using HR Schema Employees and Departments table.

Added transient attribute DepartmentCheck and EmployeeCheck in both DepartmentsEO and EmployeesEO respectively of type String. This will be used to have the value of Y and N of the check box.
(This will not be required if we have a column in both the tables for saving Y/N values corresponding to check boxes select/deselect. Since we do not have it, we are adding these attributes).

Added one more transient attribute DepartmentCheckFlag and EmployeeCheckFlag in DepartmentsVO and EmployeesVO of boolean type. This will actually get bind to the tree node for the checkboxes. And internally it checks the value of DepartmentCheck and EmployeeCheck to return true/false.
Below are the EO and VO for departments. Same is done with Employees.




Below are the getters and setters from DepartmentsVORowImpl. Same is done in EmployeesVORowImpl.



This sets DepartmentCheck as N by default as we need all checkboxes to be unchecked for this example. In real use cases this value will be read from persisted column in the table.

Now lets create a jspx page. Drag the DepartmentsVO and create it as a tree. Add EmployeeVO as the child in Tree Binding and select DepartmentCheckFlag, DepartmentName and EmployeeCheckFlag and FirstName from DepartmentsVO and EmployeeVO in edit Tree Binding.






Now lets see the jspx code. Here is the tweak which we need to do .


There are two selectBooleanChoice used. This is because we need to update the ones which are child of selected master and refresh the component. Also these checkboxes are rendered only when there is some value for the node.

Now lets see what we are doing in the value changeListener. When master/parent checkbox is selected or unselected, call goes to the valuechangelistener where the logic is written to make parent node in the state that is done by user and also get hold of all the child nodes and make them same as the parent.
Below is the code in ManagedBean to do this.


This it it. Now run the page and see the behaviour.



If Purchasing is selected then all the child gets selected .


Thanks

Download source code from here ChecboxTree.zip

1 comment: