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.
Unfortunately, activation email could not send to your email. Please try again.

ejGrid context menu didn't appears on right button click

Thread ID:

Created:

Updated:

Platform:

Replies:

124646 Jun 20,2016 11:28 AM Jun 29,2016 08:40 AM JavaScript 7
loading
Tags: ejGrid
Denis
Asked On June 20, 2016 11:28 AM

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 [Syncfusion]
Replied On June 21, 2016 08:53 AM

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. 


Denis
Replied On June 21, 2016 10:59 AM

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 [Syncfusion]
Replied On June 22, 2016 08:15 AM

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. 


Denis
Replied On June 24, 2016 08:59 AM

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

Ragavee U S [Syncfusion]
Replied On June 27, 2016 07:51 AM

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. 


Denis
Replied On June 28, 2016 09:34 AM

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 [Syncfusion]
Replied On June 29, 2016 08:40 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;