2017-11-29 14 views
0

私の目標は、セルに右クリックするとコンテキストメニューを表示することです。私のag-gridでコンテキストメニューが機能しない

しかし、私のコードは右クリックに反応しません。 私は間違っていた場所を見つけることができませんでした。

以下は私のコードです。 私はログを "console.log(" getContentMenuItems() ");"このログは印刷されませんでした。

私のグリッド-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(); 
    } 
} 

私のグリッド-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> 

答えて

1

コンテキストメニューには、別途インストールする必要があるので、別のエンタープライズ機能であります:

そして、角のグリッドをインポートした後でモジュールに含める必要があります次のようになります。

import { AgGridModule } from 'ag-grid-angular'; 
import'ag-grid-enterprise'; 

これで動作します。

関連する問題