Context Flyout in WinUI TreeGrid

14 Apr 20213 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.

<syncfusion: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>
</syncfusion:SfTreeGrid.ContextFlyout>

ContextFlyout added for record rows in WinUI TreeGrid

Context flyout for header row

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

<syncfusion: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>
</syncfusion:SfTreeGrid.HeaderContextFlyout>

ContextFlyout for header in treegrid WinUI

Context flyout for expander

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

<syncfusion:SfTreeGrid.ExpanderContextFlyout>
    <MenuFlyout>
        <MenuFlyoutItem x:Name="Expand" Text="Expand" />
        <MenuFlyoutItem x:Name="Collapse" Text="Collapse" />
    </MenuFlyout>
</syncfusion: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.

<syncfusion:SfTreeGrid.RecordContextFlyout>
    <MenuFlyout>
        <MenuFlyoutItem  x:Name="Cut" Text="Cut" />
        <MenuFlyoutItem  x:Name="Copy" Text="Copy"  />
        <MenuFlyoutItem  x:Name="Paste" Text="Paste" />
    </MenuFlyout>
</syncfusion:SfTreeGrid.RecordContextFlyout>
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" });
    }
}

ContextFlyout for opening the menu items in WinUI treegrid