New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Data Binding

The TreeList provides options for binding it to local and remote data.

Local Data

The following example demonstrates how to initialize and bind the TreeList to local data.

        .Columns(x=> {

        var dataSource = new{
            data: [
                { id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
                { id: 2, parentId: 1, Name: "Alex Sells", Position: "EVP Sales" },
                { id: 3, parentId: 1, Name: "Bob Price", Position: "EVP Marketing" }


Remote Data

To bind the TreeListDataSource to remote data and make it load items from a web service, use the remote data binding functionality. It enables the retrieval of data from the server and the saving of the TreeList data items in the server database.

The following example demonstrates how to enable the remote binding for the TreeList by setting the DataSource transport. The parentId is mapped from the ReportsTo field by the <treelist-model id="EmployeeId" parent-id="ReportsTo" expanded="true"> line. The TreeList renders its hierarchy based on the parentId-id relationship.

When you use the schema.model.fields configuration, list all fields. Set the field which represents the id of the event through the If these are not set, they will still work for displaying the data, but will post incomplete objects on the server when the items are edited.

        .Columns(x=> {
            x.Add().Field(f=> f.FirstName).Title("First Name").Width(200);
            x.Add().Field(f=> f.LastName).Title("Last Name").Width(160);
            x.Add().Field(f=> f.Position);
            x.Add().Field(f=> f.Phone).Width(200);
            x.Add().Field(f=> f.Extension).Width(140);
            x.Add().Field(f=> f.Address);
        x.Read(read => read.Action("Index", "EmployeeDirectory"))
            .Model(m=> {
                m.Id(f => f.EmployeeId);
                m.ParentId(f => f.ReportsTo);
                m.Field(f => f.FirstName);
                m.Field(f => f.LastName);
                m.Field(f => f.ReportsTo);
                m.Field(f => f.Position);
                m.Field(f => f.Phone);
                m.Field(f => f.Extension);
                m.Field(f => f.Address);

See Also

In this article