Data Binding

The PanelBarUtils enables you to bind a data collection to the PanelBarItem components.

Binding to Local Data

The following example demonstrates how to bind the PanelBar to local arrays.

<style>
    .k-content {
        padding: 4px 8px;
    }
</style>
class App extends React.Component {
    render() {
        let items = [
             {title: "First item", content: "First item content", expanded: true },
             {title: "Second item", children: [
                 {title: "Second item child item" }
                ]
            }
        ];
        let components = PanelBarUtils.mapItemsToComponents(items);

        return(
            <PanelBar children={components}/>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Binding to Remote Data

The following example demonstrates how to bind the PanelBar to remote data.

<style>
    .panelbar-wrapper {
        max-width: 400px;
        margin: 0 auto;
    }
    .custom-loading-template {
        padding: 30px;
        text-align: center;
    }
</style>
class App extends React.Component {
    serverData = [
        {
            id: 1, title: 'My Teammates', children: [
                {
                    id: 2, title: 'Andrew Fuller', content: 'Team Lead'
                },
                {
                    id: 3, title: 'Nancy Leveling', content: 'Sales Associate'
                },
                {
                    id: 4, title: 'Robert King', content: 'Sales Associate'
                }
            ]
        },
        {
            id: 5, title: 'Project', children: [
                {
                    id: 6, title: 'New Business Plan',
                },
                {
                    id: 7, title: 'Sales Forecast', children: [
                        {
                            id: 8, title: 'Q1 Forecast'
                        },
                        {
                            id: 9, title: 'Q2 Forecast'
                        },
                        {
                            id: 10, title: 'Q3 Forecast'
                        },
                        {
                            id: 11, title: 'Q4 Forecast'
                        }
                    ]
                },
                {
                    id: 12, title: 'Sales Reports'
                }
            ]
        },
        {
            id: 13, title: 'Communication', disabled: true
        }
    ]

    constructor(props) {
        super(props)

        this.state = {
            data: []
        }
    }

    componentDidMount = () => {
        this.fetchRoot()
        .then((result)=>{
            this.setState({data: result})
        })
        .then(()=>{
            return this.fetchChildren();
        })
        .then((result)=>{
            this.setState({data: result})
        })
    }

    // Simulate root items fetch
    fetchRoot = () => {
        return new Promise((resolve,reject) => {
            setTimeout(()=>{
                let data = this.serverData.map(item=>{
                    return {...item, children: undefined, content: (<div className="custom-loading-template"><h4>LOADING</h4>
                    <span className="k-icon k-i-loading"></span></div>)};
                })
                resolve(data);
            },1000)
        })
    }

    // Simulate child items fetch
    fetchChildren = () => {
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(this.serverData);
            },5000)
        })
    }

    render() {
        const components = PanelBarUtils.mapItemsToComponents(this.state.data);

        return(
            <PanelBar children={components}/>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /