How can I get the TreelList to show all children of parents who match a filter (or searchbox) condition, and keep the expandability of filtered nodes, even if children don't match the filter condition? Currently children that don't match the search are hidden and the parents become non-expandable.
For example, if I have a tree with an item "Fruit" with children "Apple", "Orange", "Grape", I would like "Apple", "Orange" and "Grape" to still show if I search for "Fruit" in the search box. If the "Fruit" node was not expanded, I want it to stay expandable.
I am using the TreeList with load data on demand. I am currently partially achieving the desired result by adding "dummy" child nodes that match the parent so the parent stays expandable on search, then removing the dummy nodes on expand and replacing with the real child items. I have also tried using hidden fields. It seems like the TreeList should have a built in option to support this use case.
1 Answer, 1 is accepted
Hello Ernie,
To show all children of filtered root items basically means to filter only the root items. The built-in TreeList filtering and searching always works with all items at all levels, so the described custom filtering requires manual coding. The implementation will differ for flat data and hierarchical data. Here is an example for searching in hierarchical data and another one for flat data. The milestones are:
1. The app will have to maintain two collections with TreeList data - one with all items and one with the filtered items. The TreeList should be bound to the filtered collection.
private List<Employee> FilteredData { get; set; } = new();2. It's not possible to use the built-in TreeListSeachBox. Instead, include a TextBox that will not trigger automatic searching.
<TelerikTextBox Placeholder="Type a digit from 0 to 5" Value="@SearchValue" Width="200px" ValueChanged="@SearchTreeList" />3. Implement custom searching, based on your requirements. For example, the code below searches only in the root items.
private async Task SearchTreeList(string newValue)
{
SearchValue = newValue;
// hierarchical data - Data is effectively a collection of root items
FilteredData = Data.Where(x => x.Name.Contains(SearchValue)).ToList();
// flat data - Data is a collection of all items
FilteredData = Data.Where(x => x.Name.Contains(SearchValue) && x.ReportsTo == null).ToList();
}Similarly, you will need custom filtering, which will require filter templates for all columns, or at least the columns that will filter only root items. Please refer to the documentation about Filter templates. In your case, you won't be filtering with the filter row context methods (context.FilterAsync()) or add FilterDescriptors to the filter menu context. Instead the UI in the filter template will execute similar code to the one in the above examples.
Overall, the demonstrated approach is rather cumbersome due to the mixture of load-on-demand and maintaining of two data collections for the TreeList. You may be able to think of a better one, which suits your specific scenario. For example, decide which collection(s) to populate when the user expands an item.
On a side note, the better way to implement the discussed scenario is to use an OnRead event, which the TreeList still doesn't have. OnRead would prevent the need to maintain two data collections.
Regards, Nansi Progress Telerik