Context menu in EJ2 JavaScript Grid control
13 Apr 202324 minutes to read
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
.
To use the context menu, inject the ContextMenu
module in the grid.
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. |
ej.grids.Grid.Inject(ej.grids.Page, ej.grids.Group, ej.grids.Sort, ej.grids.Filter, ej.grids.ContextMenu);
var grid = new ej.grids.Grid({
dataSource: data,
allowSorting: true,
allowPaging: true,
editSettings: {allowEditing: true, allowAdding: true},
allowPdfExport: true,
allowExcelExport: true,
contextMenuItems: ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',
'Copy', 'Edit', 'Delete', 'Save', 'Cancel',
'PdfExport', 'ExcelExport', 'CsvExport', 'FirstPage', 'PrevPage',
'LastPage', 'NextPage'],
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 200, textAlign: 'Right'},
{ field: 'Freight', width: 150, format: 'C2', textAlign: 'Right', editType: 'numericedit' },
{ field: 'ShipName', headerText: 'Ship Name', width: 300 },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 200 },
{ field: 'ShipCity', headerText: 'Ship City', width: 200 }
]
});
grid.appendTo('#Grid');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-grids/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id="container">
<div id="Grid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
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.
ej.grids.Grid.Inject(ej.grids.Page, ej.grids.Group, ej.grids.Sort, ej.grids.Filter, ej.grids.ContextMenu);
var grid = new ej.grids.Grid({
dataSource: data,
contextMenuItems: [{text: 'Copy with headers', target: '.e-content', id: 'copywithheader'}],
allowSelection: true,
allowPaging: true,
contextMenuClick: function(args){
if(args.item.id === 'copywithheader'){
grid.copy(true);
}
},
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Left', width: 125, isPrimaryKey: true },
{ field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },
{ field: 'ShipName', headerText: 'Ship Name', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 170 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150, textAlign: 'Right' }
]
});
grid.appendTo('#Grid');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-grids/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id="container">
<div id="Grid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Show context menu on left click
By default, the context menu items will be shown in the Grid using the right mouse click action. Show the context menu items during the left mouse click action using the created and context menu’s beforeOpen
events of the Grid.
Using the onclick
eventlistener of Grid , you can get the clicked position values and send them to the open
method of the context menu in the onclick
event of the Grid. Also, we have prevented the default right click action to open the context menu items using the created event of the Grid.
This is demonstrated in the following sample.
ej.grids.Grid.Inject(ej.grids.Page, ej.grids.Group, ej.grids.Sort, ej.grids.Filter, ej.grids.ContextMenu);
var grid = new ej.grids.Grid({
dataSource: data,
contextMenuItems: [{text: 'Copy with headers', target: '.e-content', id: 'copywithheader'}],
allowSelection: true,
allowPaging: true,
contextMenuClick: function(args){
if(args.item.id === 'copywithheader'){
grid.copy(true);
}
},
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Left', width: 125, isPrimaryKey: true },
{ field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },
{ field: 'ShipName', headerText: 'Ship Name', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 170 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150, textAlign: 'Right' }
]
});
grid.appendTo('#Grid');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-grids/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id="container">
<div id="Grid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
You can hide or show an item in context menu for specific area inside of grid by defining the
target
property.
Enable or disable context menu items
It is possible to enable or disable the default and custom context menu items in the Grid component. This is achieved by using the enableItems method of the ContextMenu. To enable or disable menu items, set the enable
parameter in the enableItems
method to true, and vice versa.
In the following sample, the Copy item is enabled or disabled based on some condition (as per the needs of the application) in the rowSelected event of the Grid.
var grid = new ej.grids.Grid({
dataSource: data,
editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true },
allowPaging: true,
contextMenuItems: ['Copy', 'Edit', 'Delete'],
rowSelected: rowSelected,
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right', isPrimaryKey: true },
{ field: 'CustomerName', headerText: 'Customer Name' },
{ field: 'Freight', format: 'C2', textAlign: 'Right', editType: 'numericedit' },
{ field: 'ShipName', headerText: 'Ship Name', width: 200 },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150, editType: 'dropdownedit' },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 }
]
});
grid.appendTo('#Grid');
function rowSelected(args) {
var contextMenuObj = grid.contextMenuModule.contextMenu;
if (args.data.OrderID % 2 === 0) {
contextMenuObj.enableItems(['Copy'], false);
} else {
contextMenuObj.enableItems(['Copy'], true);
}
}
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-grids/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id="container">
<div id="Grid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>