Flat Data

The KendoReact TreeList provides a built-in function to convert flat data to a tree that can be visualized by the component.

To covert the flat data to a tree, utilize the createDataTree function of the TreeList.

import React from 'react';
import ReactDOM from 'react-dom';

import {
    TreeList,
    createDataTree,
    mapTree,
    extendDataItem,
} from '@progress/kendo-react-treelist';

import employeesFlat from './flat-data';

const expandField = 'expanded';
const subItemsField = 'employees';
const dataTree = createDataTree(employeesFlat, i => i.id, i => i.reportsTo, subItemsField);
const columns = [
    { field: 'name', title: 'Name', expandable: true, width: 280 },
    { field: 'position', title: 'Position', width: 230 },
    { field: 'timeInPosition', title: 'Year(s) in Position', width: 150 },
    { field: 'hireDate', title: 'Hire Date', format: '{0:d}', width: 150 },
    { field: 'fullTime', title: 'Full Time', width: 150 }
];

class App extends React.Component {
    state = {
        data: [ ...dataTree ],
        expanded: [ 1, 2, 32 ]
    };

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

    render() {
        const { data, expanded } = this.state;
        const callback = item =>
            expanded.includes(item.id) ? extendDataItem(item, subItemsField, { [expandField]: true }) : item;

        return (
            <TreeList
                style={{ maxHeight: '510px', overflow: 'auto' }}
                data={mapTree(data, subItemsField, callback)}
                expandField={expandField}
                subItemsField={subItemsField}
                onExpandChange={this.onExpandChange}
                columns={columns}
            />
        );
    }
}

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