Introduction
Contribution
Knowledge Base
TreeList

dataSourceObject|Array|kendo.data.TreeListDataSource

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.

Example - setting the dataSource as a JavaScript object 

<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>

Example - setting the dataSource as a JavaScript array 

<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>

Example - setting the dataSource as an existing dataSource instance 

  <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>
In this article
dataSource
Not finding the help you need?
Contact Support