In this blog , i am going to explain , how to implement ADF drag and drop functionality.
Design :
I took 2 tables each table bind to Bean / VO. which related to each others
Like employee - dept in HR Schema for example.
But to make it simple , i created a sample bean with Employee firstname, lastname , company name, employee address , company address.
After that bind these list of beans to 2 tables in the UI page , and first table is the source to Drag , second table for Drop.
Once we drag any row from table1 dragListner will be called in the backingbean there added custom code to move the selected row from table 1 to table 2.
Implementation :
Used List of Sample Data Bean to each table with different hard coded values. as shown below.
first method fetchData bind to first table ( which is the source to drag a row)
second method fetchSecondData bind to second table ( which is the source to drop a row).
drag and drop 2 af:table components to UI Page from component palette and first table bind to fetchData() and second table bind to fectchSecondData().
after that added , Drag and Drop functionality tags to these tables as shown in the below image
implemented backing bean method as below
When run this application it should work like way.
drag and drop the first row of first table ,
to second table first position (first row).
That's it .
Design :
I took 2 tables each table bind to Bean / VO. which related to each others
Like employee - dept in HR Schema for example.
But to make it simple , i created a sample bean with Employee firstname, lastname , company name, employee address , company address.
After that bind these list of beans to 2 tables in the UI page , and first table is the source to Drag , second table for Drop.
Once we drag any row from table1 dragListner will be called in the backingbean there added custom code to move the selected row from table 1 to table 2.
Implementation :
Used List of Sample Data Bean to each table with different hard coded values. as shown below.
second method fetchSecondData bind to second table ( which is the source to drop a row).
drag and drop 2 af:table components to UI Page from component palette and first table bind to fetchData() and second table bind to fectchSecondData().
after that added , Drag and Drop functionality tags to these tables as shown in the below image
implemented backing bean method as below
When run this application it should work like way.
drag and drop the first row of first table ,
to second table first position (first row).
That's it .
No comments:
Post a Comment