How to expand or collapse the UWP TreeGrid?
In UWP TreeGrid, the default behavior for expanding or collapsing tree nodes is to click the expander icon. However, you can customize this functionality to allow users to expand or collapse nodes by clicking any cell in the row. This can enhance user experience by making the interaction more intuitive.
To achieve this customization, you need to override the ProcessOnTapped method in the TreeGridRowSelectionController class. Below is a sample implementation:
C#
treeGrid.SelectionController = new TreeGridSelectionControllerExt(treeGrid);
public class TreeGridSelectionControllerExt : TreeGridRowSelectionController
{
public TreeGridSelectionControllerExt(SfTreeGrid treeGrid) : base(treeGrid)
{
}
protected override void ProcessOnTapped(TappedRoutedEventArgs e, RowColumnIndex currentRowColumnIndex)
{
if (currentRowColumnIndex.RowIndex <= this.TreeGrid.GetHeaderIndex())
return;
var node = TreeGrid.GetNodeAtRowIndex(currentRowColumnIndex.RowIndex);
if (node != null)
{
if (node.IsExpanded)
TreeGrid.CollapseNode(node);
else if (!node.IsExpanded)
TreeGrid.ExpandNode(node);
}
base.ProcessOnTapped(e, currentRowColumnIndex);
}
}
Output
Sample:
View the sample in GitHub
Conclusion
I hope you enjoyed learning on how to expand or collapse the UWP TreeGrid.
You can refer to our UWP TreeGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!