DropDownTree control auto filter not working

[Saranya]

when am used DropDownTree control i am used below sample format

@(Html.Kendo().DropDownTree()
       .Name("ID")
       .Label(label =>
       {
           label.Content("Select an ID...");
       })
       .DataTextField("Name")
       .DataValueField("id").Value(12)
       .HtmlAttributes(new { style = "width: 100%" })
       .Filter(FilterType.Contains)
       //.LoadOnDemand(true)
       .DataSource(dataSource => dataSource.ServerFiltering(true).Read(read => read.Action("GetLocationListForDDTree", "Home") ) )
   )

when enable loadondemand it works filter but value not show selected . if am command the loadondemand its show the selected value but filter not working . i need both options kindly advice this 

 

[Eyup]

Hello Saranya,

 

Thank you for reaching out.

You are experiencing a common scenario with the DropDownTree component:

• When .LoadOnDemand(true) is enabled, filtering works, but the selected value is not displayed.
• When .LoadOnDemand(true) is disabled, the selected value is shown, but filtering does not work.

This happens because, with LoadOnDemand enabled, the DropDownTree only loads part of the data initially. If the selected value is not included in the initial data, the component cannot display it.

Solution: Ensure the Selected Value is Included on Initial Load

To have both filtering and selected value display working together:

• Modify your data source so that the node corresponding to the selected value is always present in the initial data response, even if it is not part of the default root nodes.

Example Implementation

Controller Action:

public JsonResult GetLocationListForDDTree(int? selectedId)
{
    var data = GetTreeData(); // Your logic to get tree nodes
    if (selectedId.HasValue)
    {
        var selectedNode = GetNodeById(selectedId.Value); // Find the selected node
        if (selectedNode != null && !data.Contains(selectedNode))
        {
            data.Add(selectedNode); // Ensure selected node is present
        }
    }
    return Json(data);
}

DropDownTree Configuration:

@(Html.Kendo().DropDownTree()
    .Name("ID")
    .Label(label => { label.Content("Select an ID..."); })
    .DataTextField("Name")
    .DataValueField("id")
    .Value(12)
    .HtmlAttributes(new { style = "width: 100%" })
    .Filter(FilterType.Contains)
    .LoadOnDemand(true)
    .DataSource(dataSource => dataSource
        .ServerFiltering(true)
        .Read(read => read.Action("GetLocationListForDDTree", "Home", new { selectedId = 12 }))
    )
)

Make sure to pass the selected value to your read action so the initial data includes it.

Reference

For more details about DropDownTree data binding and LoadOnDemand:

• https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/dropdowntree/binding/binding-overview

I hope this will prove helpful.

 

Regards,
Eyup
Progress Telerik