Advanced

Drag-and-Drop between Different Components

External Data Functionality

During drag-n-drop operations between different components as well as different instances of a component, it's vital to ensure that data items from the source component receive adequate representation in the target one.

The externalData property features a function responsible for dragging as value (in case you work with different components).

{   
    view:"tree", 
    drag:true, 
    select:true,
    data:[],
    externalData:grid2tree
};

The property function takes two parameters - data and id:

data (object) - the data item to move;
id (string) - the item id in the source element.

When moved to the target component, the item retains the ID it had in the source component, unless the target already has an item with this ID. In this case, the ID will be set randomly, while the initial ID will be stored in the function.

Take for instance, an app containing two trees, a DataView and DataTable. The tree dataset includes items with data.value items, while DataView and DataTable have data.title and data.rank. To enable drag-n-drop within the whole group, you need two functions:

1 . The function that will populate DataView and DataTable.

function tree2grid(data, id){
    data.rank = data.rank || -1;
    data.title = data.title || data.value;
    return data;
}

Notice the "OR" logic here:

If you drag data from DataTable to DataView and vice versa, native data and external data have the same parameters, so data.title value from the DataTable becomes data.title of the DataView. The same is true about data.rank.
If you drag data from any of the trees to DataTable and DataView, you need to redefine the data.title parameter and take its value to the data.value of the tree. Then, since in the sample data for both trees has no data.rank parameter, its value will be displayed as "-1".

2 .The function that will populate tree with dragged data is the following:

function grid2tree(data, id){
    data.value = data.value || data.title;
    return data;
}

Here only data.value matters. The tree will take the dragged-and-dropped data.value value from the other tree, or the data.title value from either of the DataTables.

Related sample: Basic Drag-and-Drop

Drag-and-Drop between Different Components

External Data Functionality

Related Articles