Drag and Drop

The TreeList component allows you to move its data items in the data tree by Drag and Drop the TreeList rows.

Getting Started

The following example demonstrates how to use the Drag and Drop feature of the TreeList.

import React from 'react';
import ReactDOM from 'react-dom';
import {
    TreeList,
    TreeListDraggableRow,
    mapTree,
    moveTreeItem,
    extendDataItem
} from '@progress/kendo-react-treelist';

import employees from './data';

const subItemsField = 'employees';
const expandField = 'expanded';
const columns = [
    { field: 'name', title: 'Name', width: '34%', expandable: true },
    { field: 'position', title: 'Position', width: '33%' }
];

class App extends React.Component {
    state = {
        data: [...employees],
        expanded: [1, 3]
    };

    onRowDrop = (event) => {
        this.setState({
            data: moveTreeItem(this.state.data, event.dragged, event.draggedOver, subItemsField)
        });
    }

    render() {
        return (
            <TreeList
                style={{ maxHeight: '540px', overflow: 'auto', width: '100%' }}
                expandField={expandField}
                subItemsField={subItemsField}
                onExpandChange={this.onExpandChange}
                data={this.addExpandField(this.state.data)}
                columns={columns}
                onRowDrop={this.onRowDrop}
                row={TreeListDraggableRow}
            />
        );
    }

    onExpandChange = (event) => {
        this.setState({
            expanded: event.value ?
                this.state.expanded.filter(id => id !== event.dataItem.id) :
                [...this.state.expanded, event.dataItem.id]
        });
    }

    addExpandField = (dataArr) => {
        const expanded = this.state.expanded;
        return mapTree(dataArr, subItemsField, (item) =>
            extendDataItem(item, subItemsField, { expanded: expanded.includes(item.id) }));
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);