Categories: Angular

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';
...

@NgModule({

  imports: [
    ...
    DxDataGridModule,
    DxTemplateModule,
    DxBulletModule,
    DxContextMenuModule
  ],
  ...
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(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(document.location.host)) {
  enableProdMode();
}

@Component({
  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="https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/data/customers.json"
    [showBorders]="true">

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

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

    <!--Grouping-->
    <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>
    
</dx-data-grid>

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

Step 7: In Index.html

<!doctype html>
<html lang="en">
  <head>
    <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="https://cdn3.devexpress.com/jslib/21.1.5/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.5/css/dx.light.css" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.10.3/dist/zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
  
    <script src="config.js"></script>
      <script>
          System.import('app').catch(console.error.bind(console));
      </script>
  </head>
<body>
  <app-root></app-root>
</body>
</html>

Step 8: Now, Run the Applications.

npm start

That’s it.

Liza Godiwala

I'm Liza Godiwala. I started my journey as an Angular Developer to Learning and developing new things in the current IT world. I completed my MCA from Dharamsinh Desai University.