• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

processOrgChartItems

A helper function which applies the specified operation descriptors to the data.

class App extends React.Component {
    state = { items: tree, expand: [], select: [], check: [] };
    render() {
        const { expand, select, check } = this.state;
        return (
            <OrgChart
                data={processOrgChartItems(this.state.items, { expand, select, check })}
                expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
                onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
                onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
            />
        );
    }
    onExpandChange = (event) => {
        let expand = this.state.expand.slice();
        const index = expand.indexOf(event.itemHierarchicalIndex);
        index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
        this.setState({ expand });
    }
}

const tree = [{
    text: 'Item1',
    items: [
        { text: 'Item1.1' },
        { text: 'Item1.2' },
        { text: 'Item1.3', items: [{ text: 'Item1.3.1' }] }]
}, {
    text: 'Item2', disabled: true,
    items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
}, {
    text: 'Item3'
}];

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

Parameters

data

undefined | "null" | any[]

The data that will be processed.
operations

OrgChartOperationDescriptors

The operation descriptors that will be applied to the data.

Returns

any[]

- The processed copy of the input data.

In this article

Not finding the help you need?