New to Kendo UI for jQuery? Start a free 30-day trial

DataSource

configuration

The data source of the widget which is used render nodes. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing kendo.data.HierarchicalDataSource instance.

If the dataSource option is set to a JavaScript object or array the widget will initialize a new kendo.data.HierarchicalDataSource instance using that value as data source configuration.

If the dataSource option is an existing kendo.data.HierarchicalDataSource instance the widget will use that instance and will not initialize a new one.

dataSource

Object|Array|kendo.data.HierarchicalDataSource

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  dataSource: {
    data: [
      { text: "foo", items: [
        { text: "bar" }
      ] }
    ]
  }
});
</script>

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
</script>

<div id="treeview"></div>
<script>
var dataSource = new kendo.data.HierarchicalDataSource({
  transport: {
    read: {
      url: "https://demos.telerik.com/service/v2/core/Employees"
    }
  },
  schema: {
    model: {
      id: "EmployeeId",
      hasChildren: "HasEmployees"
    }
  }
});

$("#treeview").kendoTreeView({
  dataSource: dataSource,
  dataTextField: "FullName"
});
</script>