How to Customize the Selection Menu of the new Xamarin FlexGrid

One of the cool new features in ComponentOne Studio for Xamarin 2018v2 is the ability to add a customizable selection menu to your FlexGrid. The selection menu provides built-in options for common actions, and it can also accept your custom additions. In this article, we’ll examine how you can customize the functionality of the selection menu.

Selection menu overview

The selection menu contains common actions for editing, selecting, and deleting text inside the data grid. There are several ways of activating it, and it varies slightly if you are on a desktop compared to mobile. On a desktop (UWP) you can activate the selection menu with a right mouse click over a cell or by a single left-click on the header of a row. On mobile (Android and iOS), you can activate menu via a long press on a cell or by tapping the header of a row.

The selection menu is contextual, and it provides slightly different options depending on some variables. For instance, the menu will not provide editing options (such as cut, paste, and delete) when displayed for non-editable cells. Also, some options, such as Undo, only become available after a user has already performed an action, in this case editing a cell.

While the Selection Menu is visible and enabled by default, you can deactivate it by setting the ShowSelectionMenu property to false. There are some cases where you may want to limit user interaction with the data in the grid, and disabling the menu and making the grid read-only is a quick way of doing so.

Customizing the selection menu

The selection menu also supports custom actions. If you prefer rolling your own actions for your clients, FlexGrid provides a simple API to create your own custom menus.

All you need to do is set a handler for the CreatingSelectionMenu event:

grid.CreatingSelectionMenu += Grid_CreatingSelectionMenu;

And in the event handler, add a new GridMenu item with a name and method for action that you want to present to the user:

        private void Grid_CreatingSelectionMenu(object sender, GridSelectionMenuEventArgs e)
        {
            e.Menu.Items.Add(new GridMenuItem("NewBehavior", () => NewBehavior(e)));

        }

NewBehavior can be whatever action you’d like to assign to that option:

        public void NewBehavior(GridSelectionMenuEventArgs e)
        {
            //your action
        }

Using this knowledge, we can implement a clear option in the selection menu for the FlexGrid. All we need to do is create the clear option in the menu:

 private void Grid_CreatingSelectionMenu(object sender, GridSelectionMenuEventArgs e)
        { 
            e.Menu.Items.Add(new GridMenuItem("Clear", () => Clear(e)));
        }

And from here implement our clearing function:

        public void Clear(GridSelectionMenuEventArgs e)
        {
            for(int c = e.CellRange.Column; c <= e.CellRange.Column2; c++) { 
                for (int r = e.CellRange.Row; r <= e.CellRange.Row2; r++)
                {
                    grid[r, c] = null;
                }
            }
        }

That’s all it takes to add your own custom clearing action to the selection menu.

Happy development using ComponentOne!

If you have any questions about this tutorial, please leave us a comment. Additionally, if you have a request for a specific demo, be sure to leave a comment below!