Custom contex menu with custom binding

[Patrycja Maria Karys]

Hi, I would like to have multilevel contex menu where I could bind the context menu items. Is that possible in SfDataGrid? I attached exmaple which I would like to be able to do.

[Sathiyathanam Jeyakumar]

Hi Patrycja Maria Karys,Top of Form

Absolutely! It is possible to add sub-menus with command binding in the RecordContextMenu of SfDataGrid. To assist you in getting started, we have provided some code snippets below that illustrate how this can be accomplished.

Xaml

<syncfusion:SfDataGrid x:Name="sfdatagrid"

                        AllowEditing="True"                              

                        AutoGenerateColumns="False"

                        ItemsSource="{Binding OrderDetails}"  >

 

    <syncfusion:SfDataGrid.RecordContextMenu>

        <ContextMenu>

            <MenuItem Header="Move to tradebook">

                <MenuItem Header="First" Command="{Binding DataGrid.DataContext.FirstCommand}" CommandParameter="{Binding Record.OrderID}"/>

                <MenuItem Header="Second" Command="{Binding DataGrid.DataContext.SecondCommand}" CommandParameter="{Binding .}"/>

                <MenuItem Header="Third" Command="{Binding DataGrid.DataContext.ThirdCommand}" CommandParameter="{Binding .}"/>

            </MenuItem>

        </ContextMenu>

    </syncfusion:SfDataGrid.RecordContextMenu>

And you can get the GridRecordContextMenuInfo in your command callback. Which contains the Record and DataGrid. Refer to the below screenshot and a sample.

Output : 

Let us know if you need any further assistance on this.

Regards,

Sathiyathanam

Attachment: SfDataGridDemo_d59ed4f4.zip

[Patrycja Maria Karys]

Is it possible to bind the First, Second, Third MenuItems to some list from ViewModel- so they are dynamically set?

[Sathiyathanam Jeyakumar]

Patrycja Maria Karys

To add submenus to your "Move to tradBook" MenuItem, you can use the ItemSource property.Then you can change this SubMenus property dynamically. Please refer to the code snippets below for more information on how to achieve this.

<syncfusion:SfDataGrid x:Name="sfdatagrid"

                        AllowEditing="True"                              

                        AutoGenerateColumns="False"

                        ItemsSource="{Binding OrderDetails}"  >

 

    <syncfusion:SfDataGrid.RecordContextMenu>

        <ContextMenu>

            <MenuItem Header="Move to tradbook" ItemsSource="{Binding DataGrid.DataContext.SubMenus}"/>

        </ContextMenu>

    </syncfusion:SfDataGrid.RecordContextMenu>

ObservableCollection<MenuItem> subMenus;

 

public ObservableCollection<MenuItem> SubMenus

{

    get { return subMenus; }

    set

    {

        subMenus = value;

        RaisePropertyChanged("SubMenus");

    }

}

 

 

public ViewModel()

{

    this.PopulateData();

    SubMenus = new ObservableCollection<MenuItem>();

    MenuItem menuItem1 = new MenuItem();

    menuItem1.Header = "First";

    menuItem1.SetBinding(MenuItem.CommandProperty, new Binding() { Path = new PropertyPath("DataGrid.DataContext.FirstCommand") });

    menuItem1.SetBinding(MenuItem.CommandParameterProperty, new Binding() { Path = new PropertyPath(".") });

    SubMenus.Add(menuItem1);

    MenuItem menuItem2 = new MenuItem();

    menuItem2.Header = "Second";

    menuItem2.SetBinding(MenuItem.CommandProperty, new Binding() { Path = new PropertyPath("DataGrid.DataContext.SecondCommand") });

    menuItem2.SetBinding(MenuItem.CommandParameterProperty, new Binding() { Path = new PropertyPath(".") });

    SubMenus.Add(menuItem2);

    MenuItem menuItem3 = new MenuItem();

    menuItem3.Header = "Third";

    menuItem3.SetBinding(MenuItem.CommandProperty, new Binding() { Path = new PropertyPath("DataGrid.DataContext.ThirdCommand") });

    menuItem3.SetBinding(MenuItem.CommandParameterProperty, new Binding() { Path = new PropertyPath(".") });

    SubMenus.Add(menuItem3);

}

Attachment: SfDataGridDemo_86b2cfca.zip