# Getting Started with the TreeList

This tutorial explains how to set up a basic Telerik UI for ASP.NET MVC TreeList and highlights the major steps in the configuration of the component.

You will initialize a TreeList control and bind it to data. Next, you will handle some of the TreeList events.

![Sample Telerik UI for ASP.NET MVC TreeList](https://www.telerik.com/aspnet-mvc/documentation/assets/74e90bcd829ab4c54d91634af9ac5049/treelist-getting-started.png)

## Prerequisites

To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET MVC components:

* To create a new pre-configured project for the Telerik UI for ASP.NET MVC components, you can [use a project template](https://www.telerik.com/aspnet-mvc/documentation/getting-started-mvc/first-steps).

* To manually configure an existing project by using NuGet, see the [Adding Telerik UI through NuGet](https://www.telerik.com/aspnet-mvc/documentation/getting-started/setup-with-nuget).

## 1. Prepare the CSHTML File

The first step is to add the required directives at the top of the `.cshtml` document:

* To use the Telerik UI for ASP.NET MVC HtmlHelpers:

  ```cshtml
  @using Kendo.Mvc.UI
  ```

Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others.

## 2. Declare the View Model

Declare the `EmployeeDirectoryRemoteModel` view model.

```C#
public class EmployeeDirectoryRemoteModel
{
    public int EmployeeId { get; set; }

    public string FirstName { get; set; }

    public string LastName { get; set; }

    public int? ReportsTo { get; set; }

    public int? Extension { get; set; }

    public string Position { get; set; }

    public bool hasChildren { get; set; }
}
```

## 3. Initialize the TreeList

Use the TreeList HtmlHelper  to add the component to a page and set some of its options.

* Use the `Name()` configuration method to assign a name to the instance of the helper—this is mandatory as its value is used for the `id` and the `name` attributes of the TreeList element.
* Configure the columns of the TreeList by binding them to the fields of the `EmployeeDirectoryRemoteModel`.
* Add the `DataSource()` configuration option and set the `Read` end point and the `Model` option.

```Razor HtmlHelper
@using Kendo.Mvc.UI

<p class="title">Employees</p>
@(Html.Kendo().TreeList<MyApplication.Models.EmployeeDirectoryRemoteModel>()
    .Name("treelist")
    .Columns(columns =>
    {
        columns.Add().Field(f => f.FirstName).Width(250);
        columns.Add().Field(e => e.LastName);
        columns.Add().Field(e => e.Position);
        columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}");
    })
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("GetData", "Home"))
        .Model(m => {
            m.Id(f => f.EmployeeId);
            m.ParentId(f => f.ReportsTo).Nullable(true);
            m.Field(f => f.FirstName);
            m.Field(f => f.LastName);
            m.Field(f => f.ReportsTo);
        })
    )
)
```

## 4. Declare the Read Action

In the `Home` controller, declare the `GetData` action that you set to the DataSource `Read` configuration in the previous step.

```C# Controller
public JsonResult GetData([DataSourceRequest] DataSourceRequest request, int? id)
{
    var data = GetEmployees();

    var result = data.Where(v => id.HasValue ? v.ReportsTo == id : v.ReportsTo == null)
        .Select(v => new
        {
            EmployeeId = v.EmployeeId,
            FirstName = v.FirstName,
            LastName = v.LastName,
            ReportsTo = v.ReportsTo,
            Position = v.Position,
            Extension = v.Extension,
            hasChildren = v.hasChildren,
        });

    return Json(result.ToTreeDataSourceResult(request));
}

public List<EmployeeDirectoryRemoteModel> GetEmployees()
{
    List<EmployeeDirectoryRemoteModel> data = new List<EmployeeDirectoryRemoteModel>();

    data.Add(new EmployeeDirectoryRemoteModel
    {
        EmployeeId = 1,
        FirstName = "Daryl",
        LastName = "Sweeney",
        Position = "CEO",
        Extension = 8253,
        ReportsTo = null,
        hasChildren = true
    });

    data.Add(new EmployeeDirectoryRemoteModel
    {
        EmployeeId = 2,
        FirstName = "Guy",
        LastName = "Wooten",
        Position = "Chief Technical Officer",
        Extension = 1155,
        ReportsTo = 1,
        hasChildren = false
    });

    data.Add(new EmployeeDirectoryRemoteModel
    {
        EmployeeId = 3,
        FirstName = "Buffy",
        LastName = "Weber",
        Position = "VP, Engineering",
        Extension = 8253,
        ReportsTo = 1,
        hasChildren = true
    });

    data.Add(new EmployeeDirectoryRemoteModel
    {
        EmployeeId = 4,
        FirstName = "Priscilla",
        LastName = "Frank",
        Position = "Chief Product Officer",
        Extension = 4183,
        ReportsTo = 3,
        hasChildren = false
    });

    data.Add(new EmployeeDirectoryRemoteModel
    {
        EmployeeId = 5,
        FirstName = "Anika",
        LastName = "Vega",
        Position = "Chief Process Officer",
        Extension = 6353,
        ReportsTo = 3,
        hasChildren = false
    });

    return data;
}
```

## 5. Handle the TreeList Events

The TreeList [exposes various events](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/treelisteventbuilder) that you can handle and further customize the functionality of the component. In this tutorial, you will use the `DataBinding` and `DataBound` events of the TreeList.

```Razor HtmlHelper
    @using Kendo.Mvc.UI

    @(Html.Kendo().TreeList<MyApplication.Models.EmployeeDirectoryRemoteModel>()
        .Name("treelist")
        .Columns(columns =>
        {
            columns.Add().Field(f => f.FirstName).Width(250);
            columns.Add().Field(e => e.LastName);
            columns.Add().Field(e => e.Position);
            columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}");
        })
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("GetData", "Home"))
            .Model(m => {
                m.Id(f => f.EmployeeId);
                m.ParentId(f => f.ReportsTo).Nullable(true);
                m.Field(f => f.FirstName);
                m.Field(f => f.LastName);
                m.Field(f => f.ReportsTo);
            })
        )
        .Events(events =>
        {
            events.DataBinding("onDataBinding");
            events.DataBound("onDataBound");
        })
    )

    <script>
        function onDataBinding(e) {
            console.log("TreeList data binding");
        }

        function onDataBound(e) {
            console.log("TreeList data bound");
        }
    </script>
```

For more examples, refer to the [demo on using the events of the TreeList](https://demos.telerik.com/aspnet-mvc/treelist/events).

## 6. (Optional) Reference Existing TreeList Instances

To use the client-side API of the TreeList and build on top of its initial configuration, you need a reference to the TreeList instance. Once you get a valid reference, you can call the respective API methods:

1. Use the `.Name()` (`id` attribute) of the component instance to get a reference.

   ```JS script
   <script>
       var treelistReference = $("#TreeList").data("kendoTreeList"); // treelistReference is a reference to the existing instance of the helper.
   </script>
   ```

2. Use the [TreeList client-side API](https://docs.telerik.com/kendo-ui/api/ui/treelist#methods) to control the behavior of the widget. In this example, you will use the `autoFitColumn` method to apply the minimum possible width to the second column of the TreeList.

   ```JS script
   <script>
       $(document).ready(function () {
           var treelistReference = $("#TreeList").data("kendoTreeList");

           treelistReference.autoFitColumn(1);
       })
   </script>
   ```

For more information on referencing specific helper instances, see the [Methods and Events](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/helper-basics/events-and-methods) article.

## Next Steps

* [Adding Custom Content through TreeList Row Templates](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/row-templates)
* [Using Filtering in the TreeList](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/filtering)

## See Also

* [Using the API of the TreeList for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/treelist/api)
* [Client-Side API of the TreeList](https://docs.telerik.com/kendo-ui/api/ui/treelist)
* [Server-Side API of the TreeList](https://www.telerik.com/aspnet-mvc/documentation/api/treelist)
* [Knowledge Base Section](https://www.telerik.com/aspnet-mvc/documentation/knowledge-base)