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

Server Binding

Local data is the data that is available on the client when the DropDownTree is initialized.

You can bind the DropDownTree locally on the server by passing the appropriate collection to the component's BindTo() method.

As of the R1 2024, the DropDownTree TagHelper will require explicit supplementation to a collection of type DropDownTreeItemModel instead of the DropDownTreeItemBase.

  1. Pass the data to the view through ViewData.

    public IActionResult Index()
    {
        ViewBag.dropdowntreeData = GetData();
        return View();
    }
    
    private IEnumerable<DropDownTreeItemModel> GetData()
    {
        List<DropDownTreeItemModel> data = new List<DropDownTreeItemModel>
            {
                new DropDownTreeItemModel
                {
                    Text = "Furniture",
                    Items = new List<DropDownTreeItemModel>
                    {
                        new DropDownTreeItemModel()
                        {
                            Text = "Tables & Chairs"
                        },
                        new DropDownTreeItemModel
                        {
                                Text = "Sofas"
                        },
                        new DropDownTreeItemModel
                        {
                                Text = "Occasional Furniture"
                        }
                    }
                },
                new DropDownTreeItemModel
                {
                    Text = "Decor",
                    Items = new List<DropDownTreeItemModel>
                    {
                        new DropDownTreeItemModel()
                        {
                            Text = "Bed Linen"
                        },
                        new DropDownTreeItemModel
                        {
                                Text = "Curtains & Blinds"
                        },
                        new DropDownTreeItemModel
                        {
                                Text = "Carpets"
                        }
                    }
                }
            };
    
        return data;
    }
    
  2. Add the DropDownTree to the view and bind it to the data that is saved in the ViewData.

    @using Kendo.Mvc.UI.Fluent

    @(Html.Kendo().DropDownTree()
        .Name("dropdowntree")
        .BindTo((IEnumerable<DropDownTreeItemModel>)ViewBag.dropdowntreeData)
    )
    <kendo-dropdowntree name="dropdowntree" bind-to="(IEnumerable<DropDownTreeItemModel>)ViewBag.dropdowntreeData">
    </kendo-dropdowntree>

See Also

In this article