# Ajax Binding

You can configure the Telerik UI TreeList for Ajax binding to make Ajax requests upon loading child nodes, sorting, or filtering.

When configured for Ajax binding, the Telerik UI TreeList for ASP.NET MVC makes Ajax requests when doing sorting, filtering or when expanding a node.

The Ajax-bound mode has the following features:

* The TreeList retrieves only the data (in JSON format) representing the current level items.

> To use lazy-loading define the `hasChildren` property of the Model

````
```C#
public class EmployeeViewModel
{
    // The Id.
    public int EmployeeID { get; set; }

    public string FirstName { get; set; }

    // This is a case-sensitive property. Define it only if you want to use lazy-loading.
    // If it is not defined, the TreeList will calculate and assign its value on the client.
    public bool hasChildren { get; set; }
}
```
````

* All column templates are executed client-side. They follow the [Kendo UI for jQuery template](https://docs.telerik.com/kendo-ui/framework/templates/overview) definition rules and may contain embedded JavaScript code.

To configure the TreeList for ASP.NET MVC to do Ajax binding:

1. Create a new ASP.NET MVC web application. Follow the steps from the [introductory article](https://www.telerik.com/aspnet-mvc/documentation/getting-started-mvc/first-steps) to add Telerik UI for ASP.NET MVC to the application.

2. Open the `HomeController.cs` and add a new action method which will return the items as JSON. The TreeList makes Ajax requests to this action.

   ```C# Controller
       public ActionResult TreeList_Read()
       {
       }
   ```

3. Add a new parameter of type `Kendo.Mvc.UI.DataSourceRequest` to the action. It will contain the current TreeList request information about sorting, aggregates and filtering. Decorate that parameter with the `Kendo.Mvc.UI.DataSourceRequestAttribute`. This attribute will populate the `DataSourceRequest` object from the posted data. Now import the `Kendo.Mvc.UI` namespace. Also add another parameter which will indicate which parent node has been expanded.

   ```C# Controller
       public ActionResult TreeList_Read([DataSourceRequest]DataSourceRequest request, int? id)
       {
       }
   ```

4. Use the `ToTreeDataSourceResult` extension method to convert the items collection to a `Kendo.Mvc.UI.TreeDataSourceResult` object. This extension method will filter, sort, calculate aggregates and find only the current level items of your data using the information provided by the `DataSourceRequest` object. To use the `ToTreeDataSourceResult` extension method, import the `Kendo.Mvc.Extensions` namespace.

   ```C# Controller
       public JsonResult TreeList_Read([DataSourceRequest] DataSourceRequest request, int? id)
       {
           var result = ((EmployeeDirectoryService) employeeDirectory).GetAllRemote().ToTreeDataSourceResult(request,
               e => e.EmployeeId,
               e => e.ReportsTo,
               e => id.HasValue ? e.ReportsTo == parentId : e.ReportsTo == null,
               e => e
           );

       }
   ```

5. Return the `TreeDataSourceResult` as JSON. Configure the Telerik UI TreeList for Ajax binding.

   ```C# Controller
       public JsonResult TreeList_Read([DataSourceRequest] DataSourceRequest request, int? id)
       {
           var result = ((EmployeeDirectoryService) employeeDirectory).GetAllRemote().ToTreeDataSourceResult(request,
               e => e.EmployeeId,
               e => e.ReportsTo,
               e => id.HasValue ? e.ReportsTo == parentId : e.ReportsTo == null,
               e => e
           );

           return Json(result, JsonRequestBehavior.AllowGet);
       }
   ```

6. In the view, configure the TreeList to use the action method created in the previous steps.

   ```Razor HtmlHelper
       @(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryRemoteModel>()
           .Name("treelist")
           .Columns(columns =>
           {
               columns.Add().Field(f => f.FirstName).Width(250).Title("First Name");
               columns.Add().Field(e => e.LastName).Title("Last Name");
               columns.Add().Field(e => e.Position);
               columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}");
           })
           .Filterable()
           .Sortable()
           .DataSource(dataSource => dataSource
               .Read(read => read.Action("TreeList_Read", "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);
               })
               .Aggregates(x=> x.Add(y=> y.BirthDate).Count())
           )
       )
   ```

7. Build and run the application.

## See Also

* [Binding to Remote Data by the TreeList HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/treelist/remote-data-binding)
* [Binding to OData by the TreeList HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/treelist/odata)
* [Server-Side API](https://www.telerik.com/aspnet-mvc/documentation/api/treelist)