Context Flyout in WinUI TreeGrid

26 Apr 20223 minutes to read

SfTreeGrid provides an entirely customizable ContextFlyout to expose the functionalities on user interface. You can create ContextFlyout for different rows in an efficient manner.

Context flyout for record rows

You can set the context menu to data rows using the SfTreeGrid.ContextFlyout property.

XAML

<treeGrid:SfTreeGrid.ContextFlyout>
    <MenuFlyout>
        <MenuFlyoutItem  x:Name="Cut" Text="Cut" />
        <MenuFlyoutItem  x:Name="Copy" Text="Copy"  />
        <MenuFlyoutItem  x:Name="Paste" Text="Paste" />
        <MenuFlyoutItem  x:Name="Delete" Text="Delete" />
    </MenuFlyout>
</treeGrid:SfTreeGrid.ContextFlyout>

Context flyout for header row

You can set the context menu to header using the SfTreeGrid.HeaderContextFlyout property.

XAML

<treeGrid:SfTreeGrid.HeaderContextFlyout>
    <MenuFlyout>
        <MenuFlyoutItem  x:Name="SortAscending" Text="Sort Ascending" />
        <MenuFlyoutItem  x:Name="SortDescending" Text="Sort Descending"  />
        <MenuFlyoutItem  x:Name="ClearSorting" Text="Clear Sorting" />
        <MenuFlyoutItem  x:Name="ClearFiltering" Text="Clear Filtering" />
    </MenuFlyout>
</treeGrid:SfTreeGrid.HeaderContextFlyout>

Context flyout for expander

You can set the context menu to expander using the SfTreeGrid.ExpanderContextFlyout property.

XAML

<treeGrid:SfTreeGrid.ExpanderContextFlyout>
    <MenuFlyout>
        <MenuFlyoutItem x:Name="Expand" Text="Expand" />
        <MenuFlyoutItem x:Name="Collapse" Text="Collapse" />
    </MenuFlyout>
</treeGrid:SfTreeGrid.ExpanderContextFlyout>

Events

The TreeGridContextFlyoutOpening event occurs when opening the context flyout in SfTreeGrid. TreeGridContextFlyoutEventArgs has the following members, which provide information about the TreeGridContextFlyoutOpening event:

ContextFlyout – Gets the corresponding context flyout.
ContextFlyoutInfo – Returns the context menu info based on the row that opens the context menu.
ContextFlyoutType – Returns the type of context menu.
RowColumnIndex – RowColumnIndex of the context menu, which is currently going to be opened. The RowColumnIndex is updated only for the RecordContextFlyout and remains empty.
Handled - Indicates whether the TreeGridContextFlyoutOpening event is handled or not.

Changing the menu item while context flyout opening

You can use the TreeGridContextFlyoutOpening event to change the menu item when the context flyout opens.

XAML

<treeGrid:SfTreeGrid.RecordContextFlyout>
    <MenuFlyout>
        <MenuFlyoutItem  x:Name="Cut" Text="Cut" />
        <MenuFlyoutItem  x:Name="Copy" Text="Copy"  />
        <MenuFlyoutItem  x:Name="Paste" Text="Paste" />
    </MenuFlyout>
</treeGrid:SfTreeGrid.RecordContextFlyout>

C#

treeGrid.TreeGridContextFlyoutOpening += TreeGrid_TreeGridContextFlyoutOpening;

private void TreeGrid_TreeGridContextFlyoutOpening(object sender, TreeGridContextFlyoutEventArgs e)
{
    e.ContextFlyout.Items.Clear();

    if (e.ContextFlyoutType == Syncfusion.UI.Xaml.TreeGrid.ContextFlyoutType.RecordCell)
    {
        e.ContextFlyout.Items.Add(new MenuFlyoutItem() { Text = "Record" });
        e.ContextFlyout.Items.Add(new MenuFlyoutItem() { Text = "Data" });
    }
}