ASP.NET Core
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Context Menu in ASP.NET Core Grid control

The Grid has options to show the context menu when right clicked on it. To enable this feature, you need to define either default or custom item in the contextMenuItems.

The default items are in the following table.

Items Description
AutoFit Auto fit the current column.
AutoFitAll Auto fit all columns.
Edit Edit the current record.
Delete Delete the current record.
Save Save the edited record.
Cancel Cancel the edited state.
Copy Copy the selected records.
PdfExport Export the grid data as Pdf document.
ExcelExport Export the grid data as Excel document.
CsvExport Export the grid data as CSV document.
Group Group the current column.
Ungroup Ungroup the current column.
SortAscending Sort the current column in ascending order.
SortDescending Sort the current column in descending order.
FirstPage Go to the first page.
PrevPage Go to the previous page.
LastPage Go to the last page.
NextPage Go to the next page.
tagHelper
contextmenu.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource"  allowSorting="true" allowExcelExport="true" allowPdfExport="true"  contextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy", "Edit", "Delete", "Save", "Cancel","PdfExport", "ExcelExport", "CsvExport", "FirstPage", "PrevPage","LastPage", "NextPage"})" allowPaging="true">
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer Name"  width="150" ></e-grid-column> 
        <e-grid-column field="Freight" headerText="Freight" editType="numericedit" textAlign="Right" format="C2"  width="120"></e-grid-column> 
        <e-grid-column field="ShipName" headerText="Ship Name" width="200"></e-grid-column> 
        <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column> 
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Custom context menu items

The custom context menu items can be added by defining the contextMenuItems as a collection of ContextMenuItemModel. Actions for this customized items can be defined in the contextMenuClick event.

tagHelper
customcontextmenu.cs
@{ 
    List<object> ContextMenuitems = new List<object>();
    ContextMenuitems.Add(new { text = "Copy with headers", target= ".e-content", id = "copywithheader" });
 }

 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" contextMenuItems="ContextMenuitems" contextMenuClick="contextMenuClick" >     
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"  textAlign="Left"  width="125"></e-grid-column>
        <e-grid-column field="EmployeeID" headerText="Employee ID"   width="125" textAlign="Right" ></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name"  width="120"></e-grid-column>                 
        <e-grid-column field="ShipCity"  headerText="Ship City"   width="170"></e-grid-column>
        <e-grid-column field="CustomerID"  headerText="Customer ID" textAlign="Right"  width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
function contextMenuClick(args) {
    if (args.item.id === 'copywithheader') {
        this.copy(true);
    }
}
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

You can hide or show an item in context menu for specific area inside of grid by defining the Target property.

Previous
Next