Friday, July 20, 2007

Filtering hierarchical data and another TreeView bug

Well, well, well. Yet another TreeView bug discovered, while answering another WPF question. But, before it, let's answer it: "How to filter hierarchical data?"

What we have? We have treeview with XML data binded to it.
What we need? To filter it - for example filter out all odd nodes in any level.
How to do? Regular way, by using Predictate generic object.

Let's start. Light, motor, camera, Data

<root> <leaf id="1" name="leaf1"> <group id="1" name="group1"> <item name="item1" id="1"> <subitem id="1">test 1</subitem> <subitem id="5">test 2</subitem> <subitem id="5">test 3</subitem> <subitem id="5">test 4</subitem> <subitem id="5">test 5</subitem> </item> <item name="item2" id="2"> <subitem id="1">test 1</subitem> <subitem id="5">test 2</subitem> <subitem id="5">test 3</subitem> <subitem id="5">test 4</subitem> <subitem id="5">test 5</subitem> </item> 

.....







Data template (hierarchical of cause)




<HierarchicalDataTemplate DataType="leaf" ItemsSource ="{Binding XPath=*}"> <TextBlock Text="{Binding XPath=@name}" /> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="group" ItemsSource ="{Binding XPath=*}"> <TextBlock Text="{Binding XPath=@name}" Foreground="Blue" /> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="item" ItemsSource ="{Binding XPath=*}"> <TextBlock Text="{Binding XPath=@name}" Foreground="Red"/> </HierarchicalDataTemplate> 

 





Data provider and control to host our data






<XmlDataProvider Source="XMLFile1.xml" x:Key="mydata" XPath="*"/> 

 
<TreeView Name="myTree" ItemsSource="{Binding Source={StaticResource mydata}, XPath=*}"/>  

 









Now let's add checkbox to switch filtering on and off





<CheckBox Name="predCheck" Checked="onPredChecked" Unchecked="onPredUnchecked">Filter by predicate object</CheckBox>


 




And now, take care on those routed events...




void onPredChecked(object sender, RoutedEventArgs e) { ICollectionView view = CollectionViewSource.GetDefaultView(myTree.ItemsSource); view.Filter = new Predicate<object>(FilterOdds); } void onPredUnchecked(object sender, RoutedEventArgs e) { ICollectionView view = CollectionViewSource.GetDefaultView(myTree.ItemsSource); view.Filter = null; } 

 





How to filter (FilterOdds method)?




bool FilterOdds(object item) { XmlElement elem = item as XmlElement; bool res = false; if (elem != null) { res = int.Parse(elem.SelectSingleNode("@id").InnerText) % 2 == 1; } return res; } 

 





Now, let's filter each node, while it's expanding.




void onExpanded(object sender, RoutedEventArgs e) { TreeViewItem item = sender as TreeViewItem; if (item != null) { ICollectionView view = CollectionViewSource.GetDefaultView(item.ItemsSource); if (view != null) { if ((bool)predCheck.IsChecked) { view.Filter = new Predicate<object>(FilterOdds); } else  { //Remove comment to stop expanding level 3  //view.Filter = null;  } } } //debug  Console.WriteLine("Item {0} on container {1}", myTree.ItemContainerGenerator.IndexFromContainer(item), ItemsControl.ItemsControlFromItemContainer(item).Name); } 

 





Cool everything should work, isn't it? Yes, except the weird bug of treeview, that preventing it from expanding 3rd level node, if filter applied. Try to compile and run it. If the check box unchecked (no filtering) we can easily expand each node on every level. See yourself



image



But if we'll check the checkbox, 3rd level will be inaccessible for us (as well as all deeper levels) See...



image



If you'll try to expand it, focus will move one level up and node remains collapsed. Pretty bad, huh... Good unbugged programming...



Source code for this article

4 comments:

mglick said...
This comment has been removed by the author.
mglick said...

If you use the following as your OnExpanded handler it should work (it's working in my test project). I think the key is just making sure the original sender of the event if the treeviewitem. Like I said ... it is working in my project so just let me know if you want the full source.

TreeViewItem item = e.OriginalSource as TreeViewItem;
if (item != null)
{
ICollectionView view = CollectionViewSource.GetDefaultView(item.ItemsSource);
if (view != null)
{
view.Filter = new Predicate< object >(FilterItems);
}
}

Suvyakta said...

if all the child elements of treeview item node are filtered out, i dont want to show the expand/collapse option for that node.At present after I click on the node,this disappears.How to overcome this problem.For eg: if test1 to test 5 elements are filtered out,item 1 would still provide scope for expansion.After I click on item 1 the expand/collapse disappears.Please help.

Eric Rodewald said...

You should get FIRED from whatever job you hold for not formatting that code. Color is not enough. I just had an epileptic seizure from trying to read it.