Content Menu In Dev Express Data Grid In Angular

In this blog, we will learn how to create a context menu in Dev express data grid in angular applications. DevExtreme is a UI component Datagrid that represents data from a remote/local source in the form of a grid. DevExtreme UI component offers such basic features as sorting, filtering, grouping, pagination, searching.

Step 1: Create a new Application

ng new dev-express-grid

Step 2: Install Node_modules

npm install --force

Step 3: Install devextreme packages

npm install devextreme@21.1 devextreme-angular@21.1 --save --save-exact

Step 4: import the below modules in app.module.ts

import { DxDataGridModule, DxBulletModule, DxTemplateModule, DxContextMenuModule } from 'devextreme-angular';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';


  imports: [
export class AppModule { }

Step 5: In the component.ts file

import { Component, OnInit, NgModule, enableProdMode } from '@angular/core';
import notify from 'devextreme/ui/notify';

if (!/localhost/.test( {

  selector: 'app-dev-express',
  templateUrl: './dev-express.component.html',
  styleUrls: ['./dev-express.component.css']

export class DevExpressComponent implements OnInit {
  dataSource: any;

  constructor() {

    //here it is context menu
    this.dataSource = [
      { text: 'Close Model', icon: 'dx-icon-clearsquare' },
      { text: 'Model Details', icon: 'dx-icon-file' },
      { text: 'Save As', icon: 'dx-icon-save' },
      { text: 'Archive', icon: 'dx-icon-arrowdown' },
      { text: 'Download', icon: 'dx-icon-download' },
      { text: 'Delete', icon: 'dx-icon-trash' },
      { text: 'Collect My Input', icon: 'dx-icon-paste' },
      { text: 'Evalution Status', icon: 'dx-icon-orderedlist' },
      { text: 'Participants', icon: 'dx-icon-group' },
      { text: 'Get Model link and Copy to Clipboard', icon: 'dx-icon-parentfolder' },
      { text: 'Get Links..', icon: 'dx-icon-link' },
      { text: 'Allocate', icon: 'dx-icon-fieldchooser' },
      { text: 'Results', icon: 'dx-icon-percent' },
      { text: 'Dashboards', icon: 'dx-icon-favorites' },
      { text: 'Send Invitations', icon: 'dx-icon-message' },
      { text: 'Create Template or Default Option set', icon: 'dx-icon-copy' },
      { text: 'Model Snapshots', icon: 'dx-icon-photo' },
      { text: 'Model Logs', icon: 'dx-icon-event' }

  itemClick(data: any) {
    if (!data.itemData.items) {
      notify("The \"" + data.itemData.text + "\" item was clicked", "success", 1500);

  ngOnInit(): void {


Step 6: In the component.html file

<dx-data-grid id="gridContainer" dataSource=""

    <dxo-paging [pageSize]="5"></dxo-paging>
    <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[3,5,10]"></dxo-pager>

    <dxo-search-panel [visible]="true" [highlightCaseSensitive]="true"></dxo-search-panel>

    <dxo-group-panel [visible]="true"></dxo-group-panel>
    <dxo-grouping [autoExpandAll]="false"></dxo-grouping>
    <dxi-column dataField="CompanyName"></dxi-column>
    <dxi-column dataField="City"></dxi-column>
    <dxi-column dataField="State"></dxi-column>
    <dxi-column dataField="Phone"></dxi-column>
    <dxi-column dataField="Fax"></dxi-column>

<!--Context Menu-->
<dx-context-menu [dataSource]="dataSource" [width]="200" target="#gridContainer" (onItemClick)="itemClick($event)">
    <div *dxTemplate="let e of 'item'">
            <span [ngClass]="e.icon"></span>
            <span *ngIf="e.items" class="dx-icon-spinright"></span> {{e.text}}

Step 7: In Index.html

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <title>Dev Express Grid</title>
    <base href="/">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="" />
    <link rel="stylesheet" type="text/css" href="" />
    <link rel="stylesheet" href="" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src="config.js"></script>

Step 8: Now, Run the Applications.

npm start

That’s it.

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories