@progress/kendo-treeview-react-wrapper/docs/item-properties.md

Kendo UI TreeView wrapper for React

---
title: Item Properties
page_title: Item Properties - TreeView - Kendo UI Wrappers for React
description: "Learn how to set item properties to The Kendo UI TreeView wrapper for React"
slug: item_properties_treeview
position: 4
---

# Item Properties

When you bind the TreeView through the `dataSource` configuration option, you can set each item to acquire certain properties.

To configure the `text`, `imageUrl`, `spriteCssClass`, and `url` fields, use the [`datatextfield`](https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#dataTextField), [`dataimageurlfield`](https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#dataTextField), [`dataspritecssclassfield`](https://docs.telerik.com/kendo-ui/api/javascript/ui//treeview#dataSpriteCssClassField), and [`dataurlfield`](https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#dataUrlField) options respectively.

To add arbitrary fields when you bind the TreeView to data, use the `dataSource` configuration. These fields are stored in `HierarchicalDataSource` and can be easily accessed through the [`dataItem`](https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#dataitem) method of the TreeView.

```jsx-preview
class TreeViewContainer extends React.Component {

        constructor(props) {
            super(props);
            this.dataSource = [{
                id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                    {
                        id: 2, text: "Kendo UI Project", expanded: false, spriteCssClass: "folder", items: [
                            { id: 3, text: "<span>This is span</span>", encoded:false, spriteCssClass: "html" },
                        ]
                    }
                ]
            }]
        }

    render() {
        return (
            <div>
                <TreeView dataSource={this.dataSource} />
            </div>
        );
     }
    }
ReactDOM.render(
    <TreeViewContainer/>,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI TreeView for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/treeview/overview)
* [API Reference of the TreeView Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview)