# Context Menu

## Content



You can use the **Menu** control as a context menu with different MVC controls, such as **FlexGrid**, **ListBox**. When a user right clicks within the control, Menu appears as the context menu with custom fields added by the user. You can add different items in the Menu to perform various operations, such as **filtering**, **sorting** and **grouping** in FlexGrid. This seamless integration of the Menu control with other MVC controls, lets a user customize the control's context menu by adding items in it, and assigning the ID of the control to the Menu's **Owner** property.

In this example, Menu is used as a context menu to enable **grouping** in the FlexGrid control. Two fields, **GroupBy: Country** and **GroupBy: Product** are added in Menu to group FlexGrid's data by column Country and Product. A user can select an item from the context menu by right-clicking within the grid.

The following image shows how **FlexGrid** appears after adding Menu control as a context menu in it:

![](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/contextmenu.png)

The following code example demonstrates how to use menu control as a Context Menu with FlexGrid:

**ContextMenuController.cs**

```razor
public ActionResult Index()
{
    return View(Sales.GetData(10));
}
```

**ContextMenu.cshtml**

```html
@using TagHelperExplorer.Models
@using C1.Web.Mvc.Grid
@{
    List<string> group = new List<string> {
        "Country","Product"
    };
}
@model IEnumerable<Sale>
<style>
    .flexGrid {
        margin: 10px;
        padding: 20px;
        color: white;
        display: inline-block;
    }
</style>
<script>
    //Grid Sorting Function using CollectionView
    function setGrouping(arg) {
        var grid = wijmo.Control.getControl("#Sales");
        var cv = grid.collectionView;
        var gd = cv.groupDescriptions;
        gd.push(new wijmo.collections.PropertyGroupDescription(arg));
    }
</script>
<div >
    <c1-flex-grid auto-generate-columns="false" id="Sales" height="450" width="700" allow-add-new="true"
                  selection-mode="SelectionMode.Cell" class="grid" > </c1-flex-grid>
     // Defining columns to be displayed in FlexGrid
    <c1-flex-grid-column binding="ID"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start" format="MMM d yy"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Active"></c1-flex-grid-column> 
</div>
//Initialize C1Menu control

<c1-menu header="Group By" execute-command="setGrouping" style="display: none" id="ctxMenu" owner="#Sales">
    <c1-menu-item header="GroupBy: Country" command-parameter="group[0]"></c1-menu-item>
    <c1-menu-item header="GroupBy: Product" command-parameter="group[1]"></c1-menu-item>
</c1-menu>
```