Grid

In This Topic

This topic discusses about various operations that require handling at the grid level.

Display Context Menu

Context menus can be helpful to the user as they provide shortcuts for actions that are frequently used. In order to show context menu, you have to initially define the context menu by creating an instance of MenuFlyout object. Menu Flyouts are an evolved version of traditional pop-up menus. It is designed to implement menus so you do not have to place your menu items into any stackpanel or column. Further, you need to use the PrepareCellForEdit event of the FlexGrid class. This event occurs when an editor cell is created and prior to it becomes active.

Refer to the QuickStart for creating the data source. In this case, note that the Customer class is used as the data source.

Use the code below to display context menu in WinUI FlexGrid in edit mode.

C#	Copy Code
MenuFlyout editMenu; public ContextMenu() { this.InitializeComponent(); var data = Customer.GetCustomerList(100); // Bind FlexGrid flexGrid1.ItemsSource = data; flexGrid1.MinColumnWidth = 85; // set the selection mode flexGrid1.SelectionMode = GridSelectionMode.Cell; // Define ContextMenu to be displayed in cell's edit mode editMenu = new MenuFlyout(); var item1 = new MenuFlyoutItem(); var item2 = new MenuFlyoutItem(); item1.Text = "Add Row"; item2.Text = "Delete Row"; item1.Click += MenuFlyoutItem_Click; item2.Click += MenuFlyoutItem_Click1; editMenu.Items.Add(item1); editMenu.Items.Add(item2); } private void MenuFlyoutItem_Click1(object sender, RoutedEventArgs e) { // Get selection var cr = flexGrid1.Selection; // Delete Row at clicked index flexGrid1.Rows.RemoveAt(cr.Row); } private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e) { // Get selection var cr = flexGrid1.Selection; flexGrid1.Rows.Insert(cr.Row, new GridRow()); } // Set Context Menu in edit mode using ContextFlyout property of editor private void flexGrid1_PrepareCellForEdit(object sender, GridCellEditEventArgs e) { var tb = (TextBox)e.Editor; tb.ContextFlyout = editMenu; }

Copy Code

MenuFlyout editMenu;
public ContextMenu()
{
    this.InitializeComponent();
    var data = Customer.GetCustomerList(100);
    // Bind FlexGrid
    flexGrid1.ItemsSource = data;
    flexGrid1.MinColumnWidth = 85;
    // set the selection mode
    flexGrid1.SelectionMode = GridSelectionMode.Cell;
    // Define ContextMenu to be displayed in cell's edit mode
    editMenu = new MenuFlyout();
    var item1 = new MenuFlyoutItem();
    var item2 = new MenuFlyoutItem();
    item1.Text = "Add Row";
    item2.Text = "Delete Row";
    item1.Click += MenuFlyoutItem_Click;
    item2.Click += MenuFlyoutItem_Click1;
    editMenu.Items.Add(item1);
    editMenu.Items.Add(item2);
}
private void MenuFlyoutItem_Click1(object sender, RoutedEventArgs e)
{
    // Get selection
    var cr = flexGrid1.Selection;
    // Delete Row at clicked index
    flexGrid1.Rows.RemoveAt(cr.Row);
}
private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    // Get selection
    var cr = flexGrid1.Selection;
    flexGrid1.Rows.Insert(cr.Row, new GridRow());
}
// Set Context Menu in edit mode using ContextFlyout property of editor
private void flexGrid1_PrepareCellForEdit(object sender, GridCellEditEventArgs e)
{
    var tb = (TextBox)e.Editor;
    tb.ContextFlyout = editMenu;
}

The XAML code will look like this:

XAML	Copy Code
<c1:FlexGrid Name="flexGrid1" ShowSelectionMenu="False" PrepareCellForEdit="flexGrid1_PrepareCellForEdit" HeadersVisibility="All"> <c1:FlexGrid.ContextFlyout> <MenuFlyout x:Name="UnEditedMenu"> <MenuFlyoutItem Text="Add Row" Click="MenuFlyoutItem_Click"></MenuFlyoutItem> <MenuFlyoutItem Text="Delete Row" Click="MenuFlyoutItem_Click"></MenuFlyoutItem> </MenuFlyout> </c1:FlexGrid.ContextFlyout> </c1:FlexGrid>

XAML

Copy Code

<c1:FlexGrid Name="flexGrid1" ShowSelectionMenu="False" PrepareCellForEdit="flexGrid1_PrepareCellForEdit" HeadersVisibility="All">
      <c1:FlexGrid.ContextFlyout>
         <MenuFlyout x:Name="UnEditedMenu">
             <MenuFlyoutItem Text="Add Row" Click="MenuFlyoutItem_Click"></MenuFlyoutItem>
             <MenuFlyoutItem Text="Delete Row" Click="MenuFlyoutItem_Click"></MenuFlyoutItem>
         </MenuFlyout>
      </c1:FlexGrid.ContextFlyout>
</c1:FlexGrid>

Keyboard Navigation

With built-in keyboard support, FlexGrid lets you perform the basic navigation operations such as moving the focus, entering or exiting the edit mode etc. with a perfect ease just by using keys. Below tables list the supported keys and their corresponding operations in non-edit as well as in edit mode of the cell.

Non-edit Mode

Key Sequence	Key Action
↑ ← → ↓	Moves focus to the adjacent cell in direction indicated by the arrow key.
Shift + Arrow	Selects adjacent cells in direction indicated by the arrow key.
F2	Grid is editable: Toggles the cell to edit mode. If a value exists in the cell, it gets selected. Else, the grid simply displays a cursor in the cell. Grid is not editable: No action.
Enter	Grid is editable: Toggles the cell to edit mode. If a value exists in the cell, it gets selected. Else, the grid simply displays a cursor in the cell. Grid is not editable: Moves the selection down to the next visible row.
Home	Moves focus to the first cell of row.
End	Moves focus to the last cell of row.
Ctrl + Home	Moves focus to the first cell of column.
Ctrl + End	Moves focus to the last cell of column.
Tab	By default, grid ignores the Tab key press and lets it cycle through the controls on the form.
Ctrl + C Ctrl + X Ctrl + V	Performs usual clipboard operations, that is, copy(Ctrl+C), cut(Ctrl+X) and paste(Ctrl+V).

Edit Mode

Key Sequence	Key Action
↑ ↓	Moves focus to the adjacent cell in the direction indicated by arrow key.
← →	Moves cursor by one character in the direction indicated by arrow key. When cursor is on the first or last character, moves focus to the adjacent cell in the direction of arrow key.
Enter	Toggles the cell to non-edit mode and moves focus to the cell below.
Esc	Cancels editing and exits the edit mode.
Tab	By default, grid ignores the Tab key press and lets it cycle through the controls on the form.