ejGrid context menu didn't appears on right button click

[Denis]

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);

[Ragavee U S]

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. 

http://help.syncfusion.com/js/api/ejgrid#members:contextmenusettings 

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. 

[Denis]

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);
                    }
                }

[Ragavee U S]

Hi Denis, 

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

http://www.syncfusion.com/downloads/support/forum/124646/ze/GridSample-7392374 

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. 

[Denis]

Hi Denis, 

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

http://www.syncfusion.com/downloads/support/forum/124646/ze/GridSample-7392374 

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() {    }
       
}

[Ragavee U S]

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. 

http://www.syncfusion.com/downloads/support/forum/124646/ze/GridSample_modified476800848 

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. 

[Denis]

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"];

[Ragavee U S]

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.