We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ejGrid context menu didn't appears on right button click

Hello. I have a problem with right-button menu in ejGrid. I'm initializing it in Angular2. What I am doing wrong? Breakpoint into functions on onContextMenuPreparing, oncontextmenu didn't work.

let paramComponent = {
columns: _self._columns,
allowFiltering: true,
allowGrouping: true,
allowPaging: true,
allowResizing: true,
allowSorting: true,
dataSource: _self._data,
disableDefaultItems: false,
editSettings: { allowDeleting: true, allowEditing: true, allowAdding: true },
enableCaseSensitivity: false,
enableContextMenu: true,
enableDropAreaAutoSizing: true,
filterBarMode: ej.Grid.FilterBarMode.Immediate,
filterSettings:
{
enableCaseSensitivity: false,
filterType: "excel"
},
groupSettings:
{
enableDropAreaAutoSizing: true,
captionFormat: " -  :   item  items "
},
pageSize: this._pageSize,
contextMenuItems: ["1", "2", "3"],
contextMenuOpen: function(e) {
let a = 1;
let b = 1;
},
contextOpen: function(e) {
if (e.row.rowType === "data" && (_self.commands)) {
_self.dxComponent.option('selectedRowKeys', [e.row.key]);
_self.selectOID.emit(e.row.key);

e.items = _self.commands.map(function(num) {
let item = <any>DxItemByCommand(num);
item.onItemClick = () => {
_self.selectItem.emit(item.command);
};
return item;
});  
}
},
rowSelected: function(data) {
if (data.data) {
_self.selectOID.emit(data.data.OID);
}
},
oncontextmenu: function(f) {
let a = 1;
let b = 2;
},
onContextMenuPreparing: function(h) {
let a = 1;
let b = 2;
}
};

this.dxComponent.setModel(paramComponent);



7 Replies

RU Ragavee U S Syncfusion Team June 21, 2016 12:53 PM UTC

Hi Denis, 

Thanks for your interest in Syncfusion products. 

We have analyzed the code example that you have shared and found that you have defined the “enableContextMenu”, “contextMenuItems” as direct properties of the Grid. But these are the inner properties of the Grid contextMenuSettings. Also, there is no such events as “onContextMenuPreparing” and “onContextMenu”. 

Please refer to the API reference link. 


So please ensure to define the properties within the Grid contextMenuSettings. If you are still facing the issue, please share the issue reproducing sample for our reference. 

Regards, 
Ragavee U S. 



DE Denis June 21, 2016 02:59 PM UTC

Thank you for reply. I changed my code, but nothing happens:

contextMenuSettings:
                {
                    enableContextMenu: true,
                    contextMenuItems: ["Add Record","Edit Record","Delete Record"],
                    oncontextmenu: function(f) {
                        let a = 1;
                        let b = 2;
                    },
                    onContextMenuPreparing: function(h) {
                        let a = 1;
                        let b = 2;
                    },
                    contextMenuOpen: function(e) {
                        let a = 1;
                        let b = 1;
                    },
                },
                columns: _self._columns,
                allowFiltering: true,
                allowGrouping: true,
                allowPaging: true,
                allowResizing: true,
                allowSorting: true,
                dataSource: _self._data,
                disableDefaultItems: false,
                editSettings: { allowDeleting: true, allowEditing: true, allowAdding: true },
                enableCaseSensitivity: false,
                enableDropAreaAutoSizing: true,
                filterBarMode: ej.Grid.FilterBarMode.Immediate,
                filterSettings:
                {
                    enableCaseSensitivity: false,
                    filterType: "excel"
                },
                groupSettings:
                {
                    enableDropAreaAutoSizing: true,
                    captionFormat: " -  :   item  items "
                },
                fields: {
                    pageSize: parseInt(this._pageSize)
                },
                //pageSize: this._pageSize,
                contextMenuOpen: function(e) {
                    let a = 1;
                    let b = 1;
                },
                contextOpen: function(e) {
                    if (e.row.rowType === "data" && (_self.commands)) {
                            _self.dxComponent.option('selectedRowKeys', [e.row.key]);
                            _self.selectOID.emit(e.row.key);

                            e.items = _self.commands.map(function(num) {
                                let item = <any>DxItemByCommand(num);
                                item.onItemClick = () => {
                                    _self.selectItem.emit(item.command);
                                };
                                return item;
                            });     
                        }
                },
                rowSelected: function(data) {
                    if (data.data) {
                        _self.selectOID.emit(data.data.OID);
                    }
                }


RU Ragavee U S Syncfusion Team June 22, 2016 12:15 PM UTC

Hi Denis, 

We have created a grid sample in Angular 2 which can be downloaded from the below location. 


In the above sample, we have enabled the context menu for the grid which is working fine at our end. So please try the sample and if you still face any issues, please reproduce the issue in the above provided sample and share. 

Regards, 
Ragavee U S. 



DE Denis replied to Ragavee U S June 24, 2016 12:59 PM UTC

Hi Denis, 

We have created a grid sample in Angular 2 which can be downloaded from the below location. 


In the above sample, we have enabled the context menu for the grid which is working fine at our end. So please try the sample and if you still face any issues, please reproduce the issue in the above provided sample and share. 

Regards, 
Ragavee U S. 


Hello. Thank you. I tried to implement solution from your example. Context menu still don't appear, shows error in debugger console: "Invalid input for property :contextMenuSettings - customContextMenuItems : Expected type - array". As early it was standard Chrome context menu, now it don't appears. It shows data in grid, and that's all. If I remove contextMenuSettings.customContextMenuItems from template, it don't show error, but still don't show context menu. What's wrong?! Here is my code:


import {Component, Input,Output, EventEmitter, OnInit, OnDestroy, ElementRef, OnChanges, SimpleChange} from 'angular2/core';
import {ConsoleService} from '../services/console.service';
import {OID, OsbmCommand} from '../types/model'
import {iDxItem, DxItemByCommand} from './dx.model'
import {EJ_GRID_COMPONENTS} from "ej/grid.component";
import {CORE_DIRECTIVES} from "angular2/common";

@Component({
    selector: 'dx-grid',
    inputs: ['pageSize'],
    template: `
        <ej-grid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData" editSettings.allowEditing="true" editSettings.allowAdding="true"
            contextMenuSettings.enableContextMenu="true"
            contextMenuSettings.customContextMenuItems="menuItems"
        >
            <e-columns>
                <e-column field = "OrderID" [isPrimaryKey]="true" headerText="Order ID" width="75" textAlign="right" ></e-column>
                <e-column field="CustomerID" headerText="Customer ID" width="80"></e-column>
                <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column>
                <e-column field="Freight" width="75" format="{0:C}" textAlign="right"></e-column>
                <e-column field="OrderDate" headerText="Order Date" width="80" format="{0:MM/dd/yyyy}" textAlign="right"></e-column>
                <e-column field="ShipCity" headerText="Ship City" width="110"></e-column>
            </e-columns>
        </ej-grid>
    `,
    directives: [EJ_GRID_COMPONENTS, CORE_DIRECTIVES]
})
export class DxGrid implements OnInit, OnDestroy {
    public menuItems = ["Clear selection","Select all"];
   
    public gridData = [{
        OrderID:        10280,
        CustomerID:     "BERGS",
        EmployeeID:     2,
        OrderDate:      new Date(840006e6),
        RequiredDate:   new Date(8424252e5),
        ShippedDate:    new Date(8425116e5),
        ShipVia:        1,
        Freight:        8.98,
        ShipName:       "Berglunds snabbköp",
        ShipAddress:    "Berguvsvägen  8",
        ShipCity:       "Luleå",
        ShipRegion:     null,
        ShipPostalCode: "S-958 22",
        ShipCountry:    "Sweden",
        CompanyName:    "Berglunds snabbköp",
        Address:        "Berguvsvägen  8",
        City:           "Luleå",
        Region:         null,
        PostalCode:     "S-958 22",
        Country:        "Sweden"
    }, {
        OrderID:        10265,
        CustomerID:     "BLONP",
        EmployeeID:     2,
        OrderDate:      new Date(838278e6),
        RequiredDate:   new Date(8406972e5),
        ShippedDate:    new Date(8398332e5),
        ShipVia:        1,
        Freight:        55.28,
        ShipName:       "Blondel père et fils",
        ShipAddress:    "24, place Kléber",
        ShipCity:       "Strasbourg",
        ShipRegion:     null,
        ShipPostalCode: "67000",
        ShipCountry:    "France",
        CompanyName:    "Blondesddsl père et fils",
        Address:        "24, place Kléber",
        City:           "Strasbourg",
        Region:         null,
        PostalCode:     "67000",
        Country:        "France"
    }, {
        OrderID:        10663,
        CustomerID:     "BONAP",
        EmployeeID:     2,
        OrderDate:      new Date(8738748e5),
        RequiredDate:   new Date(8750844e5),
        ShippedDate:    new Date(875862e6),
        ShipVia:        2,
        Freight:        113.15,
        ShipName:       "Bon app'",
        ShipAddress:    "12, rue des Bouchers",
        ShipCity:       "Marseille",
        ShipRegion:     null,
        ShipPostalCode: "13008",
        ShipCountry:    "France",
        CompanyName:    "Bon app'",
        Address:        "12, rue des Bouchers",
        City:           "Marseille",
        Region:         null,
        PostalCode:     "13008",
        Country:        "France"
    }];
   
   
   
   
   
   
      
    constructor(private console: ConsoleService, elementRef: ElementRef) {
    }
   
    protected refresh() {      
    }
   
    protected setData(data?: Array<any>) {
    }
   
    protected setColumns(cols?: Array<any>) {
    }
       
    ngOnInit() {       
        var _self = this;
        }
       
    ngOnDestroy() {    }
       
}


RU Ragavee U S Syncfusion Team June 27, 2016 11:51 AM UTC

Hi Denis, 

Since the definition of the customContextMenuItems is incorrect, you have obtained the reported error. As the customContextMenuItems is an array collection, we need to specify it as in the below code example. 

 
<ej-grid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData" editSettings.allowEditing="true" editSettings.allowAdding="true" contextMenuSettings.enableContextMenu="true" [contextMenuSettings.customContextMenuItems]="menuItems"> 


We have modified the previously updated sample with the above solution for your reference. 


Please try the above sample and if you still face any difficulties, please provide below details. 

1.       Are you using any custom css in your sample project? If so, please share the corresponding code. 
2.       Have you rendered the grid within any other parent element? 
3.       Please reproduce the issue in the above provided sample and share. 

Regards, 
Ragavee U S. 



DE Denis June 28, 2016 01:34 PM UTC

Hello. It didn't helped me.


1.       No, I didn't used custom CSS.
2.       I use element with the next code:
             <dx-grid [isShow]='true' [name]="val"
             [data]="data" [isLoading]="loading" [columns]="columns"
             [commands]="commands"
             [pageSize]="Number"
             [posOID]= "posOID"
             (selectOID) = "selectedOID($event)"
             (selectItem) = "selectItemMenu($event)"></dx-grid>

3.       Here is my new code:


<ej-grid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData" editSettings.allowEditing="true" editSettings.allowAdding="true"
            contextMenuSettings.enableContextMenu="true"
            [contextMenuSettings.customContextMenuItems]="menuItems">
            <e-columns>
                <e-column field = "OrderID" [isPrimaryKey]="true" headerText="Order ID" width="75" textAlign="right" ></e-column>
                <e-column field="CustomerID" headerText="Customer ID" width="80"></e-column>
                <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column>
                <e-column field="Freight" width="75" format="{0:C}" textAlign="right"></e-column>
                <e-column field="OrderDate" headerText="Order Date" width="80" format="{0:MM/dd/yyyy}" textAlign="right"></e-column>
                <e-column field="ShipCity" headerText="Ship City" width="110"></e-column>
            </e-columns>
        </ej-grid>

And data for element is here:
             public menuItems = ["Clear selection","Select all"];


RU Ragavee U S Syncfusion Team June 29, 2016 12:40 PM UTC

Hi Denis, 

We are unable to reproduce the issue at our end with the provided code example and information. So could you please reproduce the issue in the sample provided in our earlier update and share. 

Also, please share the following information for our reference. 

1.       Please confirm your product version. 
2.       Are you facing the issue while rendering the grid in any other physical devices like ipad, iphone etc.,? 
3.       Are you referring individual script files in your sample? 
4.       Is the default context menu of the browser displayed while right clicking? 
5.       Are you opening the context menu by right-click or touch(long press) functionality? 
6.       Is there any script error thrown while opening the context menu? 

Regards, 
Ragavee U S. 


Loader.
Up arrow icon