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

DataSource

configuration

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

If the dataSource option is set to a JavaScript object or an array, the widget will initialize a new kendo.data.DataSource instance and will use that value as the DataSource configuration.
If the dataSource option is an existing kendo.data.TreeListDataSource instance, the widget will use that instance and will not initialize a new one.

dataSource

Object|Array|kendo.data.TreeListDataSource

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22 },
        { id: 2, parentId: 1, name: "John Doe", age: 24 },
        { id: 3, parentId: 1, name: "Jenny Doe", age: 14 }
      ]
    }
  });
</script>

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    sortable: true,
    columnMenu: {
      messages: {
        sortDescending: "Sort (desc)"
      }
    },
    dataSource: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22 },
        { id: 2, parentId: 1, name: "John Doe", age: 24 },
        { id: 3, parentId: 1, name: "Jenny Doe", age: 14 }
    ]
  });
</script>

  <div id="treelist"></div>

  <script>
    var service = "https://demos.telerik.com/service/v2/core";

    $("#treelist").kendoTreeList({
      dataSource: new kendo.data.TreeListDataSource({
        transport: {
          read: {
            url: service + "/EmployeeDirectory/All"
          }
        },
        schema: {
          model: {
            id: "EmployeeID",
            parentId: "ReportsTo",
            fields: {
              ReportsTo: { field: "ReportsTo",  nullable: true },
              EmployeeID: { field: "EmployeeId", type: "number" },
              Extension: { field: "Extension", type: "number" }
            },
            expanded: true
          }
        }
      }),
      height: 400,
      columns: [
        { field: "FirstName", title: "First Name", width: 220},
        { field: "LastName", title: "Last Name", width: 160 },
        { field: "Position" }
      ]
    });
  </script>