# DropDownTree Data Binding

This article explains how to bind the DropDownTree to data and how to relate component features to properties of the model class. This is a prerequisite for successful data binding of the DropDownTree:

* What are the [default property names](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/data-binding/overview#default-property-names) that the DropDownTree expects.
* How to match model properties to the [DropDownTree component `Value`](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/data-binding/overview#value-field).
* How to match model properties to [DropDownTree parent-child relationships](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/data-binding/overview#dropdowntree-bindings).

## Default Property Names

The DropDownTree has features that map to properties in the model. The following class uses property names that will [work automatically, with no additional DropDownTree configuration](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/overview#creating-blazor-dropdowntree):

```C#.skip-repl
public class TreeItem
{
    public int Id { get; set; }

    // Flat data only
    public int? ParentId { get; set; }
    // Hierarchical data only
    public IEnumerable<TreeItem> Items { get; set; }

    public bool HasChildren { get; set; }

    public object? Icon { get; set; }
    public string Text { get; set; }
    public string Url { get; set; } = string.Empty;
    public int Value { get; set; }
}
```

The above model properties have the following meaning for the DropDownTree:

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

<style>
    style + table td {
        vertical-align: top;
    }
</style>

| Property      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |   |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - |
| `Id`          | A unique identifier. Required for [binding to flat data](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/data-binding/flat-data).                                                                                                                                                                                                                                                                                                                                                               |   |
| `ParentId`    | Identifies the item's parent. Required for [binding to flat data](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/data-binding/flat-data). Set to `null` for root items. Do not use `ParentId` with hierarchical data.                                                                                                                                                                                                                                                                          |   |
| `Items`       | Defines the item's children. Required for [binding to hierarchical data](https://www.telerik.com/blazor-ui/documentation/components/treeview/data-binding/hierarchical-data). The children's type can be different from the parent item type. The DropDownTree will render an expand arrow on the parent node if its child `Items` collection is not `null`. Also see `HasChildren`.                                                                                                                                    |   |
| `HasChildren` | Determines whether the item has children, no matter if they are loaded or not. Required for binding to flat data and for [loading on demand](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/data-binding/load-on-demand). If `true`, the item will show an expand arrow. With hierarchical data, the DropDownTree renders expand icons based on `Items`, but `HasChildren` takes precedence.                                                                                                   |   |
| `Icon`        | Defines an optional TreeView item icon.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |   |
| `IconVariant` | Defines an optional [SVG icon variant](https://www.telerik.com/blazor-ui/documentation/common-features/icons#use-svg-icon-variants) for the item icon.                                                                                                                                                                                                                                                                                                                                                                  |   |
| `Text`        | Sets the TreeView item content and the visible component value as plain text. For rich content and nested components, use an [item template](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/templates#itemtemplate) or a [value template](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/templates#valuetemplate). The DropDownTree also uses the `Text` contents for [filtering](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/filtering). |   |
| `Url`         | Sets the URL to which the DropDownTree will navigate if the item is clicked. The DropDownTree nevigation works in the same way as the [TreeView navigation](https://www.telerik.com/blazor-ui/documentation/components/treeview/navigation). To prevent automatic navigation, use a different property name or set [`UrlField`](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/data-binding/overview#dropdowntree-bindings) to a non-existent property name.                                   |   |
| `Value`       | Sets the underlying component value when the user selects the respective data item.                                                                                                                                                                                                                                                                                                                                                                                                                                     |   |

## Value Field

Use the `ValueField` parameter of the DropDownTree component to define which model property holds the data item value. You can skip setting this parameter if your model class uses the [default expected property name](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/data-binding/overview#default-property-names), namely, `Value`.

## DropDownTree Bindings

The DropDownTree item content and the parent-child relationships depend on `DropDownTreeBinding` tags. Each tag exposes the following parameters that refer to model property names:

| DropDownTreeBinding Parameter    | Default Value   |
| -------------------------------- | --------------- |
| `IdField`                        | `"Id"`          |
| `ParentIdField` (flat data)      | `"ParentId"`    |
| `ItemsField` (hierarchical data) | `"Items"`       |
| `HasChildrenField`               | `"HasChildren"` |
| `IconField`                      | `"Icon"`        |
| `IconVariantField`               | `"IconVariant"` |
| `TextField`                      | `"Text"`        |
| `UrlField`                       | `"Url"`         |

It is possible to [configure different bindings for different item levels](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/data-binding/overview#multiple-level-bindings) with the `Level` parameter of `DropDownTreeBinding`. Usually one binding configuration is enough. For example, the following model class requires the binding configuration below:

> caption DropDownTree Model Class

```C#.skip-repl
public class TreeItem
{
    public int UniqueID { get; set; }
    public string Description { get; set; }
    public bool HasChildren { get; set; }
    public IEnumerable<TreeItem> Children { get; set; }
}
```

> caption DropDownTreeBinding Configuration

```RAZOR.skip-repl
<TelerikDropDownTree>
    <DropDownTreeBindings>
        <DropDownTreeBinding IdField="@nameof(TreeItem.UniqueID)"
                             ItemsField="@nameof(TreeItem.Children)"
                             TextField="@nameof(TreeItem.Description)" />
    </DropDownTreeBindings>
</TelerikDropDownTree>
```

> Do not use `ParentId` with hierarchical data. This will confuse the DropDownTree that it is bound to flat data and the component may not render any items. If the model must have a `ParentId` property, set `ParentIdField` in the `DropDownTreeBinding` to a non-existent property.

## Multiple Level Bindings

The `DropDownTreeBinding` tag has a `Level` parameter that allows you to define different model properties for different DropDownTree levels.

Multiple level bindings can make the application more flexible. If you use [hierarchical data binding](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/data-binding/hierarchical-data), the items at different levels can even use different model types.

`Level` also allows you to define a different [`ItemTemplate`](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/templates#itemtemplate) for different levels.

To define multiple bindings, add several `DropDownTreeBinding` tags and set their zero-based `Level`. If no `Level` is set to a specific binding, the settings apply to any level that does not have explicit settings. DropDownTrees with unknown item depth should have one `DropDownTreeBinding` without a `Level`.

For better performance, define the same `ParentIdField` for all levels when using flat data.

> caption Using different property names and bindings for different levels

<demo metaUrl="client/dropdowntree/data-binding/multiple-level-bindings/" height="400"></demo>

## Next Steps

* [Bind the DropDownTree to flat data](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/data-binding/flat-data)
* [Bind the DropDownTree to hierarchical data](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/data-binding/hierarchical-data)
* [Lazy load DropDownTree items on demand](https://www.telerik.com/blazor-ui/documentation/components/dropdowntree/data-binding/load-on-demand)

## See Also

* [Live Demo: DropDownTree](https://demos.telerik.com/blazor-ui/dropdowntree/overview)