ExtJS Drag and Drop Tree Implementation
Hello!
I found this wonderful example of a drag and drop tree, with the ability to save the changes, but I'm not quite sure how to go about implementing it. Can someone point me in the right direction?
Thank you,
Tammy
Hi Tammy
My example uses drag and drop also, so the details are there.
Regarding your question on how to get started:
Really it's just a case of breaking the problem down into managable parts until you have solved all the pieces.
Start by implementing the "AJAX form using globals" at http://apex.oracle.com/pls/otn/f?p=200801:2011
It shows you how to pass data back to the database using AJAX with the WWV_FLOW variables, which are there for exactly that purpose.
Make sure you also understand the response Ext is expecting, use Firebug to examine the responses in both examples.
Once your comfortable with that, try loading a tree using an application process.
You can create stubbed responses initially for the application process, e.g.
htp.p(^'[{
"text": "adapter",
"id": "source\/adapter",
"cls": "folder"
"text": "dd",
"id": "source\/dd",
"cls": "folder"
"text": "debug.js",
"id": "source\/debug.js",
"leaf": true,
"cls": "file"
}]^');From there, add drag and drop calls, replace your stubs with production code...
I use application processes as a gateway, simply passing requests through to a database package.
It's not a small task by any means, so allow plenty of time for learning and understanding.
Regards
Mark
Similar Messages
-
Drag-and-drop tree list from files/folder
Hello all. I'm new to Flex and I'm looking for some help or
for someone to point me in the right direction. I want to write a
simple AIR application to accept a multiple text files (or a folder
full of text files) when the files/folder is dragged into a tree
list. The file/folder name will be the node name. When selected,
the contents of the file will be displayed in a text area. The text
file will contain a 4 x 4 number matrix with each column separated
by a tab and each row separated by a return. (I plan on plotting
the numbers in the matrix in the future).
What I'm most confused about is how to go about
dragging-and-dropping files into a tree list and creating item
names based on the file/folder name? And does the file content need
to go into an array collection?
Maybe I'm going about this in a difficult way. If there is an
easier way, I'd appreciate it if someone could share. Thank you
all.I have the same problema and I´m not able to find the reason.
The solution to get the event raised has been to copy configurations from wd standard appl FPM_TEST_DND_FORM and use my own Z feeder class : all seems to work perfectly , but , if I try to do it from scratch the event FPM_DROP_COMPLETED it´s not raised .
I´ve compared both configurations/class ( the one that I´ve done from scratch that it doesn´t raise the event and the one that I´ve adapted copying from standard that it raises perfectly the event) and I haven´t seen any difference (maybe I haven´t found) . -
Drag and drop tree editor that reads/writes/edits to XML
Hi,
I wondered if anyone knew any good ONLINE tools / GUIs available which gives you a very simple user interface to manage an XML file. This XML file is not complicated at all but simply represents the XML tree but allows the user to move nodes, add nodes and delete nodes.
Many Thanks in advance
NickWe have an online web content management system but it doesn't have such an interface to control a navigation hierarchy. Everything is done online.
Yes I need a web application to control this. I've looked a bit more but can't find anything helpful, I will have to create this myself.
Thanks
Nick -
I'm using the Flex DragManager in an AdvancedDataGrid with
HierarchicalData to allow the user to drag and drop tree nodes to
re-order them. It is working fine. The problem I am having is with
the drag image. The drag image does not always show up. It seems
like it will appear for one drag and drop. Then if I try to drag
another tree node I do not get the drag image there is just a line
to show I'm dragging something.
When I say drag image I mean the faded image of the text of
the tree node which appears as I drag the tree node.
I am using the following properties on the AdvancedDataGrid
to enable drag and drop:
dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
Now if set dragMoveEnabled="false" then I do get a drag image
everytime. But I need move the tree nodes around not copy them so I
need dragMoveEnabled="true".
Thank youI'm using the Flex DragManager in an AdvancedDataGrid with
HierarchicalData to allow the user to drag and drop tree nodes to
re-order them. It is working fine. The problem I am having is with
the drag image. The drag image does not always show up. It seems
like it will appear for one drag and drop. Then if I try to drag
another tree node I do not get the drag image there is just a line
to show I'm dragging something.
When I say drag image I mean the faded image of the text of
the tree node which appears as I drag the tree node.
I am using the following properties on the AdvancedDataGrid
to enable drag and drop:
dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
Now if set dragMoveEnabled="false" then I do get a drag image
everytime. But I need move the tree nodes around not copy them so I
need dragMoveEnabled="true".
Thank you -
Help needed in drag and drop of Flex tree
Hi,
We have an application which allows drag and drop between
multiple
trees and lists.
Here are the steps I follow to refresh on drag and drop:
1. Dispatch a custom event which calls server.
2. On successful response from server I change the model
which is
data provider for the tree.
3. Then, set a flag which triggers 'invalidateDisplayList'
and 'invalidateList' for tree (and other listeners).
4. The tree refreshes fine. But as soon as I drag and drop
between
trees again, I get this error in Tree.as:
TypeError: Error #1010: A term is undefined and has no
properties.
at mx.controls::Tree/::updateDropData()
at mx.controls::Tree/calculateDropIndex()
at mx.controls.listClasses::ListBase/showDropFeedback()
at mx.controls::Tree/showDropFeedback()
The behaviour is weird, sometimes the browser hangs and stops
responding.
I am calling 'contentTree.showDropFeedback(event)' in my
dragOver
event listener which is triggering error.
My tree data provider is a custom class which has 'children'
array
collection attribute.
Any help on how to resolve this issue would be highly
appreciated.
Thanks in advance,
Sujathathe major restrictions in its implemented only in
jdk1.1.Why! -
Hi All,
I have a small requirement, I have to implement drag and drop functionality in ALV ( simple trees ) in such a way that the entire contents ( Folders and its sub folders ) have to be copied. As of now i am able to drag and drop
one at a time, ie drag and drop folder and then again drag and drop its sub folder. Any solution to drag and drop both folder and its sub-folders in one step.
example program -> rsdemo_drag_drop_tree_multi which allows drag and drop of folders one at a time.
Thanks and Regards,
Kiran.Hi ,
just type BCALV_DND_* in se38 editor and press f4 you will get log of examples for drag n drop funtionality.
regards
Ashutosh
reward points if helpful -
Drag and drop of multiple nodes between 2 trees
Hi,
I am trying to implement a drag and drop of multiple nodes between two different trees. A simple drag drop written on the lines of the demo code RSDEMO_DRAG_DROP_TREE_MULTI works perfectly fine. But my requirement is, when a child (leaf) node is dragged, if its parent is not present in the target tree, that too has to be dragged and dropped from left to right. When I try to manually add nodes to the target tree, it dumps because the node key table and drag drop object have fewer nodes than what I am trying to add. So it always dumps in the drag_drop_complete method.
I have also tried putting this code in the PBO of my screen, calling a subroutine to refresh my tree with all nodes required. But I realise that the PBO does not get called after a drag drop. Is there a way to achieve this? Any help would be greatly appreciated. Thank you.
Regards,
NithyaThere's a Multi-Select TreeView sample on the WindowsClient.com, you can download it. Then you can drag multi nodes as follows:
Code Snippet
private void Form2_Load(object sender, EventArgs e)
this.listBox1.AllowDrop = true;
this.listBox1.DragOver += new DragEventHandler(listBox1_DragOver);
this.listBox1.DragDrop += new DragEventHandler(listBox1_DragDrop);
this.multiSelectTreeView1.ItemDrag += new
ItemDragEventHandler(multiSelectTreeView1_ItemDrag);
void multiSelectTreeView1_ItemDrag(object sender, ItemDragEventArgs e)
this.multiSelectTreeView1.DoDragDrop(this.multiSelectTreeView1.SelectedNodes,
DragDropEffects.Move);
void listBox1_DragDrop(object sender, DragEventArgs e)
ArrayList selectNodes = e.Data.GetData(
e.Data.GetFormats()[0]) as ArrayList;
foreach (TreeNode node in selectNodes)
this.listBox1.Items.Add(node.Text);
void listBox1_DragOver(object sender, DragEventArgs e)
e.Effect = DragDropEffects.Move; -
Drag and Drop between two ALV Tree Controls
Hello all,
I have designed a spilt control of two ALV Trees using CL_GUI_ALV_TREE.
I have a top node as the Sales order Number and the child node as the items belonging to that sales order number.
Now i need to drag and drop the lines from one sales order to another.
Also these drag drop can take place between the nodes of the two different trees.
Can someone provide with a detail example as i need to complete the same urgently.
Regards,
ArunOnce check the Below code For tree to tree drag an drop
* CLASS lcl_main DEFINITION
CLASS lcl_main DEFINITION.
PUBLIC SECTION.
* Types
TYPES:
BEGIN OF t_ekpo,
ebeln TYPE ebeln,
ebelp TYPE ebelp,
END OF t_ekpo.
TYPES:
BEGIN OF t_vbap,
vbeln TYPE vbeln,
posnr TYPE vbelp,
END OF t_vbap.
* Internal Tables
DATA:
i_ekpo TYPE STANDARD TABLE OF t_ekpo,
i_ekpo_op TYPE STANDARD TABLE OF t_ekpo,
i_vbap TYPE STANDARD TABLE OF t_vbap,
i_vbap_op TYPE STANDARD TABLE OF t_vbap,
i_fcat_ekpo TYPE lvc_t_fcat,
i_fcat_vbap TYPE lvc_t_fcat.
* Work Areas
DATA:
wa_ekpo TYPE t_ekpo,
wa_ekpo1 TYPE t_ekpo,
wa_vbap TYPE t_vbap,
wa_vbap1 TYPE t_vbap.
* Data Declarations
DATA:
g_ebeln TYPE ebeln,
g_vbeln TYPE vbeln_va.
DATA: g_variant TYPE disvariant,
g_hierarchy_header TYPE treev_hhdr,
g_handle_drag TYPE i,
g_handle_drop TYPE i.
* Class data
DATA:
splitter TYPE REF TO cl_gui_splitter_container,
container TYPE REF TO cl_gui_custom_container,
container_1 TYPE REF TO cl_gui_container,
container_2 TYPE REF TO cl_gui_container,
tree1 TYPE REF TO cl_gui_alv_tree,
tree2 TYPE REF TO cl_gui_alv_tree,
g_drag TYPE REF TO cl_dragdrop,
g_drop TYPE REF TO cl_dragdrop.
* Constants
CONSTANTS:
c_30(2) TYPE c VALUE '30'.
* Methods
METHODS:
get_data, " Data Fatch
build_display, " Display Container
display_ekpo, " Ekpo table display
display_vbap, " Vbap table display
add_node_ekpo " Add node to Ekpo
IMPORTING table TYPE t_ekpo
key TYPE lvc_nkey
text TYPE lvc_value
flag TYPE c
CHANGING i_key TYPE lvc_nkey,
add_node_vbap " Add node to vbap
IMPORTING table TYPE t_vbap
key TYPE lvc_nkey
text TYPE lvc_value
flag TYPE c
CHANGING i_key TYPE lvc_nkey,
dnd_behaviour, " Drag and drop behavour
register_events_ekpo, " Register Events Ekpo
register_events_vbap, " Register events vbap
handle_drag_multiple " Drag Multiple Values
FOR EVENT on_drag_multiple
OF cl_gui_alv_tree
IMPORTING sender node_key_table fieldname drag_drop_object,
handle_drop " Drop the values
FOR EVENT on_drop
OF cl_gui_alv_tree
IMPORTING sender node_key drag_drop_object,
add_node_drop " Add node to Drop Node
IMPORTING table TYPE t_ekpo
key TYPE lvc_nkey
text TYPE lvc_value
CHANGING i_key TYPE lvc_nkey.
ENDCLASS. " Lcl_main DEFINITION
* CLASS LCL_DRAGOBJ DEFINITION
* Drag And drop Structure
CLASS lcl_dragobj DEFINITION INHERITING FROM lcl_main FINAL.
PUBLIC SECTION.
* Types
TYPES: BEGIN OF t_node_info,
l_ekpo TYPE t_ekpo,
l_node_text TYPE lvc_value,
l_node_key TYPE lvc_nkey,
END OF t_node_info.
* Data
DATA: i_node_info TYPE TABLE OF t_node_info,
wa_node_info TYPE t_node_info.
ENDCLASS. " LCL_DRAGOBJ DEFINITION
* Object Declarations
DATA obj_main TYPE REF TO lcl_main.
* Initialization *
INITIALIZATION.
CREATE OBJECT obj_main.
* Selection Screen *
SELECTION-SCREEN BEGIN OF BLOCK block1 WITH FRAME.
SELECT-OPTIONS:
s_ebeln FOR obj_main->g_ebeln,
s_vbeln FOR obj_main->g_vbeln MATCHCODE OBJECT cs_vbeln.
SELECTION-SCREEN END OF BLOCK block1.
* Start of Selection *
START-OF-SELECTION.
* Call Screen
CALL SCREEN 100.
* CLASS lcl_main IMPLEMENTATION
* Local class Implementation
CLASS lcl_main IMPLEMENTATION.
* Get Data *
METHOD get_data.
* Data from Ekpo
SELECT ebeln
ebelp
FROM ekpo
UP TO 100 ROWS
INTO TABLE i_ekpo
WHERE ebeln IN s_ebeln.
* Data from Vbap
SELECT vbeln
posnr
FROM vbap
UP TO 100 ROWS
INTO TABLE i_vbap
WHERE vbeln IN s_vbeln.
ENDMETHOD. " Get_data
* Build Display *
METHOD build_display.
* Create Container
CREATE OBJECT container
EXPORTING
container_name = 'CUST_CONT'.
* Split the container
CREATE OBJECT splitter
EXPORTING
parent = container
rows = 1
columns = 2.
CALL METHOD splitter->get_container
EXPORTING
row = 1
column = 1
RECEIVING
container = container_1.
CALL METHOD splitter->get_container
EXPORTING
row = 1
column = 2
RECEIVING
container = container_2.
* create tree control
CREATE OBJECT tree1
EXPORTING
parent = container_1
node_selection_mode = cl_gui_column_tree=>node_sel_mode_multiple
item_selection = 'X'
no_html_header = 'X'
no_toolbar = 'X'
EXCEPTIONS
cntl_error = 1
cntl_system_error = 2
create_error = 3
lifetime_error = 4
illegal_node_selection_mode = 5
failed = 6
illegal_column_name = 7.
IF sy-subrc NE 0.
CLEAR sy-subrc.
ENDIF. " IF sy-subrc NE 0.
CREATE OBJECT tree2
EXPORTING
parent = container_2
node_selection_mode = cl_gui_column_tree=>node_sel_mode_multiple
item_selection = 'X'
no_html_header = 'X'
no_toolbar = 'X'
EXCEPTIONS
cntl_error = 1
cntl_system_error = 2
create_error = 3
lifetime_error = 4
illegal_node_selection_mode = 5
failed = 6
illegal_column_name = 7.
IF sy-subrc NE 0.
CLEAR sy-subrc.
ENDIF. " IF sy-subrc NE 0.
g_variant-report = sy-repid.
g_variant-handle = space.
g_variant-log_group = space.
g_variant-username = space.
g_variant-text = space.
g_variant-dependvars = space.
* Call method for get data
CALL METHOD get_data.
* Drap And Drop behaviour method
CALL METHOD dnd_behaviour.
* Display the Ekpo table
CALL METHOD obj_main->display_ekpo.
* Diaplay the vbap table
CALL METHOD obj_main->display_vbap.
CALL METHOD tree1->frontend_update.
CALL METHOD tree2->frontend_update.
ENDMETHOD. " Build_display
* Display EKPO *
METHOD display_ekpo.
* Data
DATA:
l_key1 TYPE lvc_nkey,
l_key2 TYPE lvc_nkey,
l_key3 TYPE lvc_nkey,
l_node_text TYPE lvc_value.
* ALV control service modules
CALL FUNCTION 'LVC_FIELDCATALOG_MERGE'
EXPORTING
i_buffer_active = 'X'
i_structure_name = 'EKPO'
i_client_never_display = 'X'
i_bypassing_buffer = space
CHANGING
ct_fieldcat = i_fcat_ekpo
EXCEPTIONS
inconsistent_interface = 1
program_error = 2
OTHERS = 3.
IF sy-subrc EQ 0.
DELETE i_fcat_ekpo FROM 4.
ENDIF. " IF sy-subrc EQ 0.
g_hierarchy_header-heading = 'Purchase Order Details'(001).
g_hierarchy_header-tooltip = 'Purchase Order'(002).
g_hierarchy_header-width = c_30.
g_hierarchy_header-width_pix = ' '.
* Diaply
CALL METHOD tree1->set_table_for_first_display
EXPORTING
is_hierarchy_header = g_hierarchy_header
is_variant = g_variant
CHANGING
it_outtab = obj_main->i_ekpo_op
it_fieldcatalog = i_fcat_ekpo.
LOOP AT i_ekpo INTO wa_ekpo1.
MOVE wa_ekpo1 TO wa_ekpo.
l_key1 = ''.
AT NEW ebeln.
MOVE wa_ekpo-ebeln TO l_node_text.
* Call method for Add Node to Ekpo
CALL METHOD add_node_ekpo
EXPORTING
table = wa_ekpo
key = l_key1
text = l_node_text
flag = space
CHANGING
i_key = l_key2.
ENDAT.
CLEAR l_node_text.
MOVE wa_ekpo-ebelp TO l_node_text.
* Call method for Add Node to Ekpo
CALL METHOD add_node_ekpo
EXPORTING
table = wa_ekpo
key = l_key2
text = l_node_text
flag = 'X'
CHANGING
i_key = l_key3.
ENDLOOP. " LOOP AT i_ekpo INTO wa_ekpo1.
* Call method For Register events
CALL METHOD register_events_ekpo.
ENDMETHOD. " Display_ekpo
* Display VBAP *
METHOD display_vbap.
* Data
DATA:
l_key1 TYPE lvc_nkey,
l_key2 TYPE lvc_nkey,
l_key3 TYPE lvc_nkey,
l_node_text TYPE lvc_value.
REFRESH i_fcat_vbap.
* ALV control service modules
CALL FUNCTION 'LVC_FIELDCATALOG_MERGE'
EXPORTING
i_buffer_active = 'X'
i_structure_name = 'VBAP'
i_client_never_display = 'X'
i_bypassing_buffer = space
CHANGING
ct_fieldcat = i_fcat_vbap
EXCEPTIONS
inconsistent_interface = 1
program_error = 2
OTHERS = 3.
IF sy-subrc EQ 0.
DELETE i_fcat_vbap FROM 4.
ENDIF. " IF sy-subrc EQ 0.
g_hierarchy_header-heading = 'Sales Order Details'(003).
g_hierarchy_header-tooltip = 'Sales Order'(004).
g_hierarchy_header-width = c_30.
g_hierarchy_header-width_pix = ' '.
* Display
CALL METHOD tree2->set_table_for_first_display
EXPORTING
is_hierarchy_header = g_hierarchy_header
is_variant = g_variant
CHANGING
it_outtab = obj_main->i_vbap_op
it_fieldcatalog = i_fcat_vbap.
LOOP AT i_vbap INTO wa_vbap1.
MOVE wa_vbap1 TO wa_vbap.
l_key1 = ''.
AT NEW vbeln.
MOVE wa_vbap-vbeln TO l_node_text.
* Call method for Add Node to vbap
CALL METHOD add_node_vbap
EXPORTING
table = wa_vbap
key = l_key1
text = l_node_text
flag = 'X'
CHANGING
i_key = l_key2.
ENDAT.
CLEAR l_node_text.
MOVE wa_vbap-posnr TO l_node_text.
* Call method for Add Node to vbap
CALL METHOD add_node_vbap
EXPORTING
table = wa_vbap
key = l_key2
text = l_node_text
flag = space
CHANGING
i_key = l_key3.
ENDLOOP. " LOOP AT i_vbap INTO wa_vbap1.
* Call method For Register events
CALL METHOD register_events_vbap.
ENDMETHOD. " Display_vbap
* Add Node to Ekko *
METHOD add_node_ekpo.
* Data
DATA: l_layout_node TYPE lvc_s_layn.
IF flag = 'X'.
l_layout_node-dragdropid = g_handle_drag.
ENDIF. " IF flag = 'X'.
* Add node to tree1
CALL METHOD tree1->add_node
EXPORTING
i_relat_node_key = key
i_relationship = cl_gui_column_tree=>relat_last_child
is_outtab_line = table
i_node_text = text
is_node_layout = l_layout_node
IMPORTING
e_new_node_key = i_key
EXCEPTIONS
relat_node_not_found = 1
node_not_found = 2
OTHERS = 3.
IF sy-subrc NE 0.
CLEAR sy-subrc.
ENDIF. " IF sy-subrc NE 0.
ENDMETHOD. " Add_node_ekpo
* Add Node to Vbap *
METHOD add_node_vbap.
* Data
DATA: l_layout_node TYPE lvc_s_layn.
IF flag = 'X'.
l_layout_node-dragdropid = g_handle_drop.
ENDIF. " IF flag = 'X'.
* Add node for tree2
CALL METHOD tree2->add_node
EXPORTING
i_relat_node_key = key
i_relationship = cl_gui_column_tree=>relat_last_child
is_outtab_line = table
i_node_text = text
is_node_layout = l_layout_node
IMPORTING
e_new_node_key = i_key
EXCEPTIONS
relat_node_not_found = 1
node_not_found = 2
OTHERS = 3.
IF sy-subrc NE 0.
CLEAR sy-subrc.
ENDIF. " IF sy-subrc NE 0.
ENDMETHOD. " Add_node_vbap
* Dnd behaviour *
METHOD dnd_behaviour.
* Data
DATA: effect TYPE i,
l_flavor TYPE c VALUE 'f'.
* For drag
CREATE OBJECT g_drag.
effect = cl_dragdrop=>copy.
CALL METHOD g_drag->add
EXPORTING
flavor = l_flavor
dragsrc = 'X'
droptarget = ' '
effect = effect
effect_in_ctrl = effect.
CALL METHOD g_drag->get_handle
IMPORTING
handle = g_handle_drag.
* For Drop
CREATE OBJECT g_drop.
effect = cl_dragdrop=>copy.
CALL METHOD g_drop->add
EXPORTING
flavor = l_flavor
dragsrc = ' '
droptarget = 'X'
effect = effect
effect_in_ctrl = effect.
CALL METHOD g_drop->get_handle
IMPORTING
handle = g_handle_drop.
ENDMETHOD. " Dnd_behaviour
* register events *
METHOD register_events_ekpo.
* Data
DATA: lt_events TYPE cntl_simple_events.
* Tree events registers ALV Tree
CALL METHOD tree1->get_registered_events
IMPORTING
events = lt_events.
* Register events on frontend
CALL METHOD tree1->set_registered_events
EXPORTING
events = lt_events
EXCEPTIONS
cntl_error = 1
cntl_system_error = 2
illegal_event_combination = 3.
IF sy-subrc NE 0.
CLEAR sy-subrc.
ENDIF. " IF sy-subrc NE 0.
* Event Handling
SET HANDLER obj_main->handle_drag_multiple FOR tree1.
ENDMETHOD. " Register_events_ekpo
* register events *
METHOD register_events_vbap.
* Data
DATA: lt_events TYPE cntl_simple_events.
* Tree events registers ALV Tree
CALL METHOD tree2->get_registered_events
IMPORTING
events = lt_events.
* Register events on frontend
CALL METHOD tree2->set_registered_events
EXPORTING
events = lt_events
EXCEPTIONS
cntl_error = 1
cntl_system_error = 2
illegal_event_combination = 3.
IF sy-subrc NE 0.
CLEAR sy-subrc.
ENDIF. " IF sy-subrc NE 0.
* Event
SET HANDLER obj_main->handle_drop FOR tree2.
ENDMETHOD. " Register_events_vbap
* Handle drag multiple Values *
METHOD handle_drag_multiple.
* Data
DATA: dataobj TYPE REF TO lcl_dragobj,
l_node_key TYPE lvc_nkey,
l_ekpo TYPE t_ekpo,
l_node_text TYPE lvc_value,
l_node_layout TYPE lvc_s_layn.
* Create and fill dataobject for event ON_DROP.
CREATE OBJECT dataobj.
* Loop the Node key Table
LOOP AT node_key_table INTO l_node_key.
CALL METHOD sender->get_outtab_line
EXPORTING
i_node_key = l_node_key
IMPORTING
e_outtab_line = l_ekpo
e_node_text = l_node_text
es_node_layout = l_node_layout.
IF l_node_layout-isfolder NE 'X'.
dataobj->wa_node_info-l_node_key = l_node_key.
dataobj->wa_node_info-l_ekpo = l_ekpo.
dataobj->wa_node_info-l_node_text = l_node_text.
APPEND dataobj->wa_node_info TO dataobj->i_node_info.
ENDIF. " IF l_node_layout-isfolder NE 'X'.
ENDLOOP. " LOOP AT node_key_table INTO l_node_key
drag_drop_object->object = dataobj.
ENDMETHOD. " Handle_drag_multiple
* Handle drop multiple Values *
METHOD handle_drop.
DATA: dataobj TYPE REF TO lcl_dragobj,
l_new_key TYPE lvc_nkey,
l_node_text TYPE lvc_value.
CATCH SYSTEM-EXCEPTIONS move_cast_error = 1.
* ON_DROP
dataobj ?= drag_drop_object->object.
LOOP AT dataobj->i_node_info INTO dataobj->wa_node_info.
MOVE dataobj->wa_node_info-l_node_text TO l_node_text.
* Call method for Add Node to vbap
CALL METHOD add_node_drop
EXPORTING
table = dataobj->wa_node_info-l_ekpo
key = node_key
text = l_node_text
CHANGING
i_key = l_new_key.
ENDLOOP. " LOOP AT dataobj->i_node_info INTO dataobj->wa_node_inf
* Expand the node
CALL METHOD sender->expand_node
EXPORTING
i_node_key = node_key
CALL METHOD sender->frontend_update.
ENDCATCH.
IF sy-subrc NE 0.
CALL METHOD drag_drop_object->abort.
ENDIF. " IF sy-subrc NE 0
ENDMETHOD. " Handle_drop
* Add Node to drop *
METHOD add_node_drop.
* Add node to drop tree
CALL METHOD tree2->add_node
EXPORTING
i_relat_node_key = key
i_relationship = cl_gui_column_tree=>relat_last_child
is_outtab_line = table
i_node_text = text
* is_node_layout = l_layout_node
IMPORTING
e_new_node_key = i_key
EXCEPTIONS
relat_node_not_found = 1
node_not_found = 2
OTHERS = 3.
IF sy-subrc NE 0.
CLEAR sy-subrc.
ENDIF. " IF sy-subrc NE 0
ENDMETHOD. " Add_node_drop
ENDCLASS. " lcl_main IMPLEMENTATION
*& Module STATUS_0100 OUTPUT
* Screen 100 Pbo
MODULE status_0100 OUTPUT.
SET PF-STATUS 'BACK'.
* SET TITLEBAR 'xxx'.
CALL METHOD obj_main->build_display.
ENDMODULE. " Status_0100 OUTPUT
*& Module USER_COMMAND_0100 INPUT
* Screen 100 Pai
MODULE user_command_0100 INPUT.
IF sy-ucomm EQ 'BACK'.
LEAVE TO SCREEN 0.
ENDIF. " IF sy-ucomm EQ 'BACK'
ENDMODULE. " USER_COMMAND_0100 INPUT
*& Report ZBPS_TREE_DRAG_DROP
REPORT zbps_tree_drag_drop.
* CLASS lcl_main DEFINITION
CLASS lcl_main DEFINITION.
PUBLIC SECTION.
* Types
TYPES:
BEGIN OF t_ekpo,
ebeln TYPE ebeln,
ebelp TYPE ebelp,
END OF t_ekpo.
TYPES:
BEGIN OF t_vbap,
vbeln TYPE vbeln,
posnr TYPE vbelp,
END OF t_vbap.
* Internal Tables
DATA:
i_ekpo TYPE STANDARD TABLE OF t_ekpo,
i_ekpo_op TYPE STANDARD TABLE OF t_ekpo,
i_vbap TYPE STANDARD TABLE OF t_vbap,
i_vbap_op TYPE STANDARD TABLE OF t_vbap,
i_fcat_ekpo TYPE lvc_t_fcat,
i_fcat_vbap TYPE lvc_t_fcat.
* Work Areas
DATA:
wa_ekpo TYPE t_ekpo,
wa_ekpo1 TYPE t_ekpo,
wa_vbap TYPE t_vbap,
wa_vbap1 TYPE t_vbap.
* Data Declarations
DATA:
g_ebeln TYPE ebeln,
g_vbeln TYPE vbeln_va.
DATA: g_variant TYPE disvariant,
g_hierarchy_header TYPE treev_hhdr,
g_handle_drag TYPE i,
g_handle_drop TYPE i.
* Class data
DATA:
splitter TYPE REF TO cl_gui_splitter_container,
container TYPE REF TO cl_gui_custom_container,
container_1 TYPE REF TO cl_gui_container,
container_2 TYPE REF TO cl_gui_container,
tree1 TYPE REF TO cl_gui_alv_tree,
tree2 TYPE REF TO cl_gui_alv_tree,
g_drag TYPE REF TO cl_dragdrop,
g_drop TYPE REF TO cl_dragdrop.
* Constants
CONSTANTS:
c_30(2) TYPE c VALUE '30'.
* Methods
METHODS:
get_data, " Data Fatch
build_display, " Display Container
display_ekpo, " Ekpo table display
display_vbap, " Vbap table display
add_node_ekpo " Add node to Ekpo
IMPORTING table TYPE t_ekpo
key TYPE lvc_nkey
text TYPE lvc_value
flag TYPE c
CHANGING i_key TYPE lvc_nkey,
add_node_vbap " Add node to vbap
IMPORTING table TYPE t_vbap
key TYPE lvc_nkey
text TYPE lvc_value
flag TYPE c
CHANGING i_key TYPE lvc_nkey,
dnd_behaviour, " Drag and drop behavour
register_events_ekpo, " Register Events Ekpo
register_events_vbap, " Register events vbap
handle_drag_multiple " Drag Multiple Values
FOR EVENT on_drag_multiple
OF cl_gui_alv_tree
IMPORTING sender node_key_table fieldname drag_drop_object,
handle_drop " Drop the values
FOR EVENT on_drop
OF cl_gui_alv_tree
IMPORTING sender node_key drag_drop_object,
add_node_drop " Add node to Drop Node
IMPORTING table TYPE t_ekpo
key TYPE lvc_nkey
text TYPE lvc_value
CHANGING i_key TYPE lvc_nkey.
ENDCLASS. " Lcl_main DEFINITION
* CLASS LCL_DRAGOBJ DEFINITION
* Drag And drop Structure
CLASS lcl_dragobj DEFINITION INHERITING FROM lcl_main FINAL.
PUBLIC SECTION.
* Types
TYPES: BEGIN OF t_node_info,
l_ekpo TYPE t_ekpo,
l_node_text TYPE lvc_value,
l_node_key TYPE lvc_nkey,
END OF t_node_info.
* Data
DATA: i_node_info TYPE TABLE OF t_node_info,
wa_node_info TYPE t_node_info.
ENDCLASS. " LCL_DRAGOBJ DEFINITION
* Object Declarations
DATA obj_main TYPE REF TO lcl_main.
* Initialization *
INITIALIZATION.
CREATE OBJECT obj_main.
* Selection Screen *
SELECTION-SCREEN BEGIN OF BLOCK block1 WITH FRAME.
SELECT-OPTIONS:
s_ebeln FOR obj_main->g_ebeln,
s_vbeln FOR obj_main->g_vbeln MATCHCODE OBJECT cs_vbeln.
SELECTION-SCREEN END OF BLOCK block1.
* Start of Selection *
START-OF-SELECTION.
* Call Screen
CALL SCREEN 100.
* CLASS lcl_main IMPLEMENTATION
* Local class Implementation
CLASS lcl_main IMPLEMENTATION.
* Get Data *
METHOD get_data.
* Data from Ekpo
SELECT ebeln
ebelp
FROM ekpo
UP TO 100 ROWS
INTO TABLE i_ekpo
WHERE ebeln IN s_ebeln.
* Data from Vbap
SELECT vbeln
posnr
FROM vbap
UP TO 100 ROWS
INTO TABLE i_vbap
WHERE vbeln IN s_vbeln.
ENDMETHOD. " Get_data
* Build Display *
METHOD build_display.
* Create Container
CREATE OBJECT container
EXPORTING
container_name = 'CUST_CONT'.
* Split the container
CREATE OBJECT splitter
EXPORTING
parent = container
rows = 1
columns = 2.
CALL METHOD splitter->get_container
EXPORTING
row = 1
column = 1
RECEIVING
container = container_1.
CALL METHOD splitter->get_container
EXPORTING
row = 1
column = 2
RECEIVING
container = container_2.
* create tree control
CREATE OBJECT tree1
EXPORTING
parent = container_1
node_selection_mode = cl_gui_column_tree=>node_sel_mode_multiple
item_selection = 'X'
no_html_header = 'X'
no_toolbar = 'X'
EXCEPTIONS
cntl_error = 1
cntl_system_error = 2
create_error = 3
lifetime_error = 4
illegal_node_selection_mode = 5
failed = 6
illegal_column_name = 7.
IF sy-subrc NE 0.
CLEAR sy-subrc.
ENDIF. " IF sy-subrc NE 0.
CREATE OBJECT tree2
EXPORTING
parent = container_2
node_selection_mode = cl_gui_column_tree=>node_sel_mode_multiple
item_selection = 'X'
no_html_header = 'X'
no_toolbar = 'X'
EXCEPTIONS
cntl_error = 1
cntl_system_error = 2
create_error = 3
lifetime_error = 4
illegal_node_selection_mode = 5
failed = 6
illegal_column_name = 7.
IF sy-subrc NE 0.
CLEAR sy-subrc.
ENDIF. " IF sy-subrc NE 0.
g_variant-report = sy-repid.
g_variant-handle = space.
g_variant-log_group = space.
g_variant-username = space.
g_variant-text = space.
g_variant-dependvars = space.
* Call method for get data
CALL METHOD get_data.
* Drap And Drop behaviour method
CALL METHOD dnd_behaviour.
* Display the Ekpo table
CALL METHOD obj_main->display_ekpo.
* Diaplay the vbap table
CALL METHOD obj_main->display_vbap.
CALL METHOD tree1->frontend_update.
CALL METHOD tree2->frontend_update.
ENDMETHOD. " Build_display
* Display EKPO *
METHOD display_ekpo.
* Data
DATA:
l_key1 TYPE lvc_nkey,
l_key2 TYPE lvc_nkey,
l_key3 TYPE lvc_nkey,
l_node_text TYPE lvc_value.
* ALV control service modules
CALL FUNCTION 'LVC_FIELDCATALOG_MERGE'
EXPORTING
i_buffer_active = 'X'
i_structure_name = 'EKPO'
i_client_never_display = 'X'
i_bypassing_buffer = space
CHANGING
ct_fieldcat = i_fcat_ekpo
EXCEPTIONS
inconsistent_interface = 1
program_error = 2
OTHERS = 3.
IF sy-subrc EQ 0.
DELETE i_fcat_ekpo FROM 4.
ENDIF. " IF sy-subrc EQ 0.
g_hierarchy_header-heading = 'Purchase Order Details'(001).
g_hierarchy_header-tooltip = 'Purchase Order'(002).
g_hierarchy_header-width = c_30.
g_hierarchy_header-width_pix = ' '.
* Diaply
CALL METHOD tree1->set_table_for_first_display
EXPORTING
is_hierarchy_header = g_hierarchy_header
is_variant = g_variant
CHANGING
it_outtab = obj_main->i_ekpo_op
it_fieldcatalog = i_fcat_ekpo.
LOOP AT i_ekpo INTO wa_ekpo1.
MOVE wa_ekpo1 TO wa_ekpo.
l_key1 = ''.
AT NEW ebeln.
MOVE wa_ekpo-ebeln TO l_node_text.
* Call method for Add Node to Ekpo
CALL METHOD add_node_ekpo
EXPORTING
table = wa_ekpo
key = l_key1
text = l_node_text
flag = space
CHANGING
i_key = l_key2.
ENDAT.
CLEAR l_node_text.
MOVE wa_ekpo-ebelp TO l_node_text.
* Call method for Add Node to Ekpo
CALL METHOD add_node_ekpo
EXPORTING
table = wa_ekpo
key = l_key2
text = l_node_text
flag = 'X'
CHANGING
i_key = l_key3.
ENDLOOP. " LOOP AT i_ekpo INTO wa_ekpo1.
* Call method For Register events
CALL METHOD register_events_ekpo.
ENDMETHOD. " Display_ekpo
* Display VBAP *
METHOD display_vbap.
* Data
DATA:
l_key1 TYPE lvc_nkey,
l_key2 TYPE lvc_nkey,
l_key3 TYPE lvc_nkey,
l_node_text TYPE lvc_value.
REFRESH i_fcat_vbap.
* ALV control service modules
CALL FUNCTION 'LVC_FIELDCATALOG_MERGE'
EXPORTING
i_buffer_active = 'X'
i_structure_name = 'VBAP'
i_client_never_display = 'X'
i_bypassing_buffer = space
CHANGING
ct_fieldcat = i_fcat_vbap
EXCEPTIONS
inconsistent_interface = 1
program_error = 2
OTHERS = 3.
IF sy-subrc EQ 0.
DELETE i_fcat_vbap FROM 4.
ENDIF. " IF sy-subrc EQ 0.
g_hierarchy_header-heading = 'Sales Order Details'(003).
g_hierarchy_header-tooltip = 'Sales Order'(004).
g_hierarchy_header-width = c_30.
g_hierarchy_header-width_pix = ' '.
* Display
CALL METHOD tree2->set_table_for_first_display
EXPORTING
is_hierarchy_header = g_hierarchy_header
is_variant = g_variant
CHANGING
it_outtab = obj_main->i_vbap_op
it_fieldcatalog = i_fcat_vbap.
LOOP AT i_vbap INTO wa_vbap1.
MOVE wa_vbap1 TO wa_vbap.
l_key1 = ''.
AT NEW vbeln.
MOVE wa_vbap-vbeln TO l_node_text.
* Call method for Add Node to vbap
CALL METHOD add_node_vbap
EXPORTING
table = wa_vbap
key = l_key1
text = l_node_text
flag = 'X'
CHANGING
i_key = l_key2.
ENDAT.
CLEAR l_node_text.
MOVE wa_vbap-posnr TO l_node_text.
* Call method for Add Node to vbap
CALL METHOD add_node_vbap
EXPORTING
table = wa_vbap
key = l_key2
text = l_node_text
flag = space
CHANGING
i_key = l_key3.
ENDLOOP. " LOOP AT i_vbap INTO wa_vbap1.
* Call method For Register events
CALL METHOD register_events_vbap.
ENDMETHOD. " Display_vbap
* Add Node to Ekko *
METHOD add_node_ekpo.
* Data
DATA: l_layout_node TYPE lvc_s_layn.
IF flag = 'X'.
l_layout_node-dragdropid = g_handle_drag.
ENDIF. " IF flag = 'X'.
* Add node to tree1
CALL METHOD tree1->add_node
EXPORTING
i_relat_node_key = key
i_relationship = cl_gui_column_tree=>relat_last_child
is_outtab_line = table
i_node_text = text
is_node_layout = l_layout_node
IMPORTING
e_new_node_key = i_key
EXCEPTIONS
relat_node_not_found = 1
node_not_found = 2
OTHERS = 3.
IF sy-subrc NE 0.
CLEAR sy-subrc.
ENDIF. " IF sy-subrc NE 0.
ENDMETHOD. " Add_node_ekpo
* Add Node to Vbap *
METHOD add_node_vbap.
* Data
DATA: l_layout_node TYPE lvc_s_layn.
IF flag = 'X'.
l_layout_node-dragdropid = g_handle_drop.
ENDIF. " IF flag = 'X'.
* Add node for tree2
CALL METHOD t -
Drag and Drop for Tree in a Table
I have placed a tree in a table using the example provided in an article "Creating TreeTables in Swing" in java.sun.com. But , instead of using the FileSystem data with which the example was explained , i have passed my own data...Then i created a panel wherein i placed two of these tables with buttons in between.
The buttons are meant for data transfer....The problem is if i implement Drag and Drop support for the TreeTable the Tree embedded in the Table doesn't expand and collapsing properly....
Can there be any reason that if a tree is placed in a Jtable and the drag and drop is enabled using setDragEnabled(true) will it effect the normal behaviourYou can implement DropTargetListener, DragSourceListener, DragGestureListener like the following:
public class MyTree extends JTree
implements DropTargetListener, DragSourceListener, DragGestureListener {
public void dragEnter (DropTargetDragEvent event) {
event.acceptDrag (DnDConstants.ACTION_MOVE);
public void dragExit (DropTargetEvent event) {
//System.out.println( "dragExit");
public void dragOver (DropTargetDragEvent event) {
public void drop (DropTargetDropEvent event) {
// place your code for action after drop
public void dropActionChanged ( DropTargetDragEvent event ) {
public void dragGestureRecognized( DragGestureEvent event) {
public void dragDropEnd (DragSourceDropEvent event) {
public void dragEnter (DragSourceDragEvent event) {
//System.out.println( " dragEnter");
public void dragExit (DragSourceEvent event) {
//System.out.println( "dragExit");
public void dragOver (DragSourceDragEvent event) {
//System.out.println( "dragExit");
public void dropActionChanged ( DragSourceDragEvent event) {
//System.out.println( "dropActionChanged");
}Hope this can help. -
Hi, I've been playing around with a trail version of flex and
was interested to know if anybody had tried to implement the drag
and drop functionality of the Tree component to a TileList? After
much messing about I noticed the format of the Tree data in the
DragSource was different to that of other lists. I've tried
overriding the addDragData method to see if I can change the format
of the data although this seems to cause problems when the Drag
complete event is triggered. Any ideas or help would be
appreciated.Hey, Thanks for the reply. Yes this appears to work although
it took a bit of messing around and I still had to override the
dragCompleteHandler method of the Tree component to get the tree
view to update. One issue I do have (This appears to be an issue
with the tree component) is as you drag and drop files across from
one tree to another, when you remove the last child node the parent
node which has a folder icon changes to a document icon. Is there a
way around this? -
How to drag and drop nodes in Tree?
Hi,
I want to drag and drop nodes in the tree. For example a tree represents the hierarchy of employees reporting in an organization by using tree.I want to change the reporting an employee visible in the tree by simple drag and drop operation in place of going to another form for updating each employee record indiviually.
Regards
PiyushRon,
I looked into implementing drag / drop in one of the apex trees I created today and ran across this thread. Thank you Ron for the links, it helped a lot.
I added the code below to my page's "Execute when Page Loads" (tree region id is "tree_reg") and the tree is now drag/drop enabled.
It did break the [+] icon from collapsing the tree though ... but the apex.widget.tree buttons still work
var regTree = apex.jQuery("#tree_reg").find("div.tree");
regTree.tree({
callback : {
onmove: function(NODE, TREE_OBJ, REF_NODE, TYPE)
{alert(NODE.id+" "+TREE_OBJ.id+" "+ REF_NODE);}
});Next, I plan on creating a AJAX call using NODE.id, TREE_OBJ.id, and REF_NODE
V/R
Ricker -
How can I drag and drop an item from one Tree control to another in LabVIEW 7.1?
You can use the mouse up and down event on the two tree controls but the problem is making the correct selection in the second tree control. I want to be able to switch over to the selection bar of the second tree control so that I can place my item in the correct position. I know all possible workarounds with double-clicks and so on... but I really want a windows drag and drop.
This is what I have for the moment. Please check the library below. I need to activate the selection bar of the second tree control somehow to get the position in the control. The VI below is written in LV 7.1
Attachments:
Drag&Drop.llb 65 KBHi Jones,
As far as I know this feature is currently not supported by the Tree control. A workaround, would be to use the vertical position of the mouse in the button up event to determine what line you�re dropping the item.
If you would like the Tree control to include the drag and drop feature, please submit this as a Product Suggestion under the feedback at www.ni.com/contact.
Good luck!
Best regards,
Philip C.
Applications Engineer
National Instruments
www.ni.com/ask
- Philip Courtois, Thinkbot Solutions -
Is it possible to create a tree with drag-and-drop functionality using ajax
I saw these samples;
Scott Spendolini's AJAX Select List Demo
http://htmldb.oracle.com/pls/otn/f?p=33867:1:10730556242433798443
Building an Ajax Memory Tree by Scott Spendolini
http://www.oracle.com/technology/pub/articles/spendolini-tree.html
Carl Backstrom ApEx-AJAX & DHTML examples;
http://htmldb.oracle.com/pls/otn/f?p=11933:5:8901671725714285254
Do you think is it possible to create a tree with drag-and-drop functionality using ajax and apex like this sample; http://www.scbr.com/docs/products/dhtmlxTree/
Thank you,
Kind regards.
TonguçHello,
Sure you can build it, I just don't think anyone has, you could also use their solution as well in an APEX page it's just a matter of integration.
Carl -
Re-create Tree control drag and drop move
Hello,
Ive got a tree control where dragEnabled=true and I have
custom handlers for dragEnter, dragOver, and dragDrop so that I can
drag/drop from datagrid's to the tree and it works fine.
The issue is now the built in tree functionality for moving
nodes around within the tree is gone. When I set dropEnabled=true
it breaks the ability to drop from the datagrid to the tree.
How can i keep the ability to move tree nodes within the tree
and also be able to drag and drop from a datagrid onto the tree?
Thanks for any help!While doing more testing I found the solution.. seriously...
dont know how I should have known this one...
on Tree dragOver handler:
if( from.id == 'data_grid' ) event.preventDefault(); -
Implementing drag and drop across components with drag image...
Hey all,
Finally got the hang of drag and drop. Not too hard, but a little time consuming. I found an article showing how to capture and drag a BufferedImage within a JTree. When you click and drag a node, it creates a BufferedImage of the node on screen and "ghosts" it a bit, which has a very appealing effect.
However, when I try to drag this image to a JList component, it disappears. So I created the same affect in the JList component. Now you can drag the image from the tree to the list and vice versa. However, the problem is, the image does not "fly over" the borders of the two components (butted up against each other) with the mouse. The image seems to go under the borders, while the mouse floats above everything.
What I would like to do is be able to drag the image all over the application, perhaps even the desktop in the case of a SDI application. I want to be able to see this image drag from my Java app over the Windows Explorer folder, just like how you can do that with Windows Explorer, dragging an image of the selected node into any app that supports the drop. I know we can handle the "transfer" data from explorer and vice versa, but how to be able to keep an image with the mouse?
My best guess is somehow using the Glass pane, grabbing a ref to its BufferedImage (if that is even what is there), and drawing the dragged item in that pane. But, then, how will the image move over the desktop outside of the app, where a glass pane is not?
Is there a way to draw on top of anything, anywhere, but still be able to redraw the background as the image moves with the mouse? There are times where the image may be big, so I don't want to have to capture the underlying screen as an image covering the size of the drag image to restore it as the drag image moves around.
Thank you.We know cursors support some degree of transparence because they have shapes other than blocks.
I've done some playing around with
Toolkit.getDefaultToolkit().createCustomCursor(....);The sad news is, it seems that as soon as a pixel's alpha value is greater than 0, it automatically becomes 100% opaque.
The best you can do, is to take your image, and divide it into a pixel-checkerboard, and set the alpha value of alternating pixels to 0.
e.g.
BufferedImage i = new BufferedImage(32, 32, BufferedImage.TYPE_INT_ARGB);
int[] data = ((DataBufferInt)i.getRaster().getDataBuffer()).getData();
boolean on = true;
for (int z=0; z<data.length; z++)
if (on)
data[z] = 0xffffffff;
else
data[z] = 0x00000000;
on = !on;
if (z%32==0) on = !on;
Cursor hazyWhite = Toolkit.getDefaultToolkit().createCustomCursor(i, new Point(0,0), "hw");
Maybe you are looking for
-
Report for Cash flow (fund flow from Bank GL)
Hi Expert, I would like to have your advice on how can I create this type of report? Is it better using Fund Management? My client is asking on cash flow report in which the report should show all fund (cash at bank) movement. Basically, the report
-
Container passwd does not exist
Hello I have a problem with the Directory Server 5.2 on a Solaris 10 System. I have make following steps: 1. idsconfig started with this options: 1 Domain to serve : mthnet.local 2 Base DN to setup : dc=mthnet,dc=local 3 Profile name to create : defa
-
I'm using the Full LabWindows/CVI 2010 SP1. To get the issue down to its simplest terms, I made a new user interface project from the template and inserted this code right before DisplayPanel was called: char portString[1000]; portString[0] =
-
New 1242 APs not being properly recognized in WCS
I manage a deployment of several hundred APs, almost all of them 1242ag and the last few that were added to the system have been coming up strangely in WCS. The controllers seems to recognize them but I have gotten warning messages that they are in t
-
Social Security number OR company org number...
Need help with one Acrobat field - need to crave the format yyyymmdd-nnnn or yymmdd-nnnn in the same field... so that the user could write either of this examples 19640628-5103 or 640628-5103... Also it should be possible to write 560000-0000 - that