Custom Rendering

The TreeView enables you to customize the content of its nodes.

To customize the appearance of the items, use the itemRender property of the TreeView.

The following example demonstrates how to display an icon next to the text of a TreeView node.

class App extends React.Component {
    render() {
        return (
            <TreeView
                data={tree}
                itemRender={props =>
                    [<span className={iconClassName(props.item)} key='0'></span>, props.item.text]
                }
            />
        );
    }
}

const tree = [{
    text: 'My Documents', expanded: true,
    items: [
        {
            text: 'Kendo UI Project', expanded: true,
            items: [
                { text: 'about.html' },
                { text: 'index.html' },
                { text: 'logo.png' }
            ]
        },
        {
            text: 'New Web Site', expanded: true,
            items: [
                { text: 'mockup.jpg' },
                { text: 'Research.pdf' }
            ]
        },
        {
            text: 'Reports', expanded: true,
            items: [
                { text: 'February.pdf' },
                { text: 'March.pdf' },
                { text: 'April.pdf' }
            ]
        }
    ]
}];

const is = (fileName, ext) => new RegExp(`.${ext}\$`).test(fileName);
function iconClassName({ text, items }) {
    if (items !== undefined) {
        return 'k-icon k-i-folder';
    } else if (is(text, 'pdf')) {
        return 'k-icon k-i-file-pdf';
    } else if (is(text, 'html')) {
        return 'k-icon k-i-html';
    } else if (is(text, 'jpg|png')) {
        return 'k-icon k-i-image';
    } else {
        return '';
    }
}

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