How to create context menu in SfDataGrid?
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