I am aiming to display a context menu when the user right-clicks on a cell.
Unfortunately, my code is not responding to the right click event. I have been unable to locate where I may have made a mistake.
Here is the snippet of my code that seems to be causing the issue. I inserted the log statement "console.log("getContentMenuItems()");" but it does not appear in the console output.
my-grid-application.component.ts
export class MyGridApplicationComponent implements OnInit, OnDestroy {
gridOptions: GridOptions;
private subscription: Subscription;
private isPubPark: boolean = false;
private getContextMenuItems;
constructor(private commCodeGridOptionService: CommCodeGridOptionService, private commonService: CommonService) {
console.log("MyGridApplicationComponent: Constructor()");
let params = new URLSearchParams(window.location.search.substring(1));
this.isPubPark = (params.get('isPubPark') == 'true');
console.log("params:" + params + ", " + params.get('isPubPark') + ", isPubPark: " + this.isPubPark);
this.commCodeGridOptionService.setTarget(this.isPubPark);
this.commCodeGridOptionService.fetchColumnDefs();
this.commCodeGridOptionService.getColumnDefMessage().subscribe(message => {
console.log("MyGridApplicationComponent:getColumnDefMessage()");
this.gridOptions.columnDefs = this.commCodeGridOptionService.gridOptions.columnDefs;
this.gridOptions.api.setColumnDefs(this.gridOptions.columnDefs);
});
this.commCodeGridOptionService.getRowDataMessage().subscribe(message => {
console.log("MyGridApplicationComponent getRowDataMessage().subscribe()");
this.gridOptions.rowData = this.commCodeGridOptionService.commcodeSitesList;
//The gridOptions api will be set and ready to use once the grid's gridReady event has been called.
this.gridOptions.api.setRowData(this.gridOptions.rowData);
});
this.getContextMenuItems = function getContextMenuItems(params) {
console.log("getContentMenuItems()");
var result = [
{
name: "Always Disabled",
disabled: true,
tooltip: "Very long tooltip, did I mention that I am very long, well I am! Long! Very Long!"
},
"separator",
"copy"
];
return result;
};
}
ngOnInit() {
console.log("MyGridApplicationComponent: ngOnInit()");
this.gridOptions = {};
this.subscription = this.commonService.notifyObservable$.subscribe((res) => {
console.log(res);
if (res.hasOwnProperty('option') && res.option === 'onCommCodeSelected') {
this.changeCommCodeFilter(res.value);
}
});
}
//set filter to commcode when click commCodeDesc component
public changeCommCodeFilter(commcode: string) {
console.log("changeCommCodeFilter() ", commcode);
let ageFilterComponent = this.gridOptions.api.getFilterInstance('commCode');
ageFilterComponent.setModel({
type: 'equals',
filter: commcode,
filterTo: null
});
this.gridOptions.api.onFilterChanged();
window.scrollTo(0,0);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
my-grid-application.component.html
<h3><a href='/?isPubPark={{!isPubPark}}'></a></h3>
<app-comm-code-selectbox></app-comm-code-selectbox>
<div style="width: 100%; height:700px">
<ag-grid-angular #agGrid
style="width:100%;height:100%;"
class="ag-fresh"
[gridOptions]="gridOptions"
[enableRangeSelection]="true"
[allowContextMenuWithControlKey]="true"
[getContextMenuItems]="getContextMenuItems"
rowHeight=100
enableSort
enableFilter
enableColResize>
</ag-grid-angular>
</div>