Articles in this section
Category / Section

How to create context menu in SfDataGrid?

1 min read

At present, SfDataGrid does not provide built-in support for context menu. However, you can achieve this from the sample side by displaying a custom view in the GridLongPressed event.

Refer the below code in which a view is displayed when the grid is long pressed.

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                        xmlns:local="clr-namespace:ContextMenuSupport"
                        x:Class="ContextMenuSupport.MainPage"
                        xmlns:sfgrid="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms">
<ContentPage.BindingContext>
    <local:ViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
    <RelativeLayout x:Name="relativeLayout">
      <sfgrid:SfDataGrid x:Name="dataGrid"
                         ItemsSource="{Binding Collection}"
                         ColumnSizer="Star"
                         RelativeLayout.WidthConstraint="{ConstraintExpression
                                                      Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
                         RelativeLayout.HeightConstraint="{ConstraintExpression
                                                      Type=RelativeToParent,Property=Height,Factor=1,Constant=0}"
                         GridLongPressed="DataGrid_GridLongPressed"
           />     
   </RelativeLayout>
 </ContentPage.Content>
</ContentPage>

 

MainPage.cs

public partial class MainPage : ContentPage
{
    StackLayout contextMenu;
    Button sortButton;
    Button clearSortButton;
    private bool isContextMenuDisplayed = false;
    private string currentColumnName;
    public MainPage()
    {
        InitializeComponent();
        CreateContextMenu();
        dataGrid.AllowSorting = true;
        dataGrid.GridTapped += DataGrid_GridTapped;           
     }
 
    private void DataGrid_GridTapped(object sender, GridTappedEventsArgs e)
    {
        relativeLayout.Children.Remove(contextMenu);
        isContextMenuDisplayed = false;
    }
 
    public void CreateContextMenu()
    {
        contextMenu = new StackLayout(); 
        sortButton = new Button();
        sortButton.Text = "Sort";           
        sortButton.BackgroundColor = Color.Black;
        sortButton.TextColor = Color.White;
        sortButton.Clicked += SortButton_Clicked;
        
        clearSortButton = new Button();
        clearSortButton.Text = "Clear sort";           
        clearSortButton.BackgroundColor = Color.Black;
        clearSortButton.TextColor = Color.White;
        clearSortButton.Clicked += ClearSortButton_Clicked;
 
        contextMenu.Children.Add(sortButton);
        contextMenu.Children.Add(clearSortButton);            
    }
 
    private void ClearSortButton_Clicked(object sender, EventArgs e)
    {
        relativeLayout.Children.Remove(contextMenu);
        isContextMenuDisplayed = false;
        dataGrid.SortColumnDescriptions.Clear();
    }
 
    private void SortButton_Clicked(object sender, EventArgs e)
    {
        relativeLayout.Children.Remove(contextMenu);
        isContextMenuDisplayed = false;
        dataGrid.SortColumnDescriptions.Clear();
        dataGrid.SortColumnDescriptions.Add(new SortColumnDescription()
        {
            ColumnName = currentColumnName
        });
    }
 
    public void DataGrid_GridLongPressed(object sender, GridLongPressedEventsArgs e)
    {
        if (!isContextMenuDisplayed)
        {
            currentColumnName = dataGrid.Columns[e.RowColumnindex.ColumnIndex].MappingName;
            var point = dataGrid.RowColumnIndexToPoint(e.RowColumnindex);
            relativeLayout.Children.Add(contextMenu, Constraint.Constant(point.X), Constraint.Constant(point.Y));
            isContextMenuDisplayed = true;
        }
        else
        {
            relativeLayout.Children.Remove(contextMenu);
            isContextMenuDisplayed = false;
        }
    }
}

 

Screenshot:

 

Sample Link:

How to create context menu in SfDataGrid

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied