Benutzersteuerung innerhalb der ag-grid Zelle

Question

Wie setze ich ein Benutzersteuerelement in einen ag-grid Zelleneditor?

Spaltendefinition:

{ 
      headerName: 'Product', 
      field: 'product', 
      width: 140, 
      editable: true, 
      cellRendererFramework: ProductEditorComponent 
     }, 

und der Editor-Komponente:

@Component({ 
selector: 'ag-product-editor-control', 
template: ` 
    <div #container>  
     <ng-select 
      [options]="products" 
      [multiple]="true" 
      placeholder="Select multiple"> 
     </ng-select> 
    </div> 
`, 
providers: [RegionProductsConfigService] 

}) 
    export class ProductEditorComponent implements AgEditorComponent, AfterViewInit { 
products: Array<any>; 
item: any; 

@ViewChild('container', { read: ViewContainerRef }) private container; 
ngAfterViewInit() { 
    this.container.element.nativeElement.focus(); 
} 

agInit(params : any): void { 
    this.products = RegionProductsConfigService.getProducts().map(x => ({ 'value': x.ID, 'label': x.Name })); 
} 
} 

Aber es scheint nicht, Produkte zu binden. Kann jemand helfen?

Answer 1

Meine Lösung bestand darin, ein benutzerdefiniertes Ereignis in der CellRenderer-Komponente auszulösen, das einen Verweis auf die Zeile im Raster und den ausgewählten Wert enthält. Ich könnte dann hinzufügen hinzufügen einen Ereignis-Listener in der übergeordneten Komponente, die das RowData-Attribut des Rasters aktualisiert.

import {Component} from "@angular/core"; 
import {AgRendererComponent} from "ag-grid-ng2"; 

@Component({ 
    moduleId: module.id, 
    template: `<md-select [(ngModel)]="selectedValue" (change)="onChange($event)"> 
        <md-option 
         ngfor="let opt of params.context['options']" 
         value="{{ opt.value }}"> 
         {{ opt.name }} 
        </md-option> 
       </md-select>` 
}) 

export class CustomCellRendererComponent implements AgRendererComponent { 
    private params: any; 
    private selectedValue: string; 

    agInit(params: any): void { 
     this.params = params; 
     this.selectedValue = this.params['data']['selectedValue']; 
    } 

    onChange(event: any) { 
     let gridEvent: CustomEvent = new CustomEvent('option-changed', { 
      'bubbles': true, 
      'detail': { 
       'row': this.params.data.row, 
       'value': event.value 
      } 
     }); 
     event.source.trigger.nativeElement.dispatchEvent(gridEvent); 
    } 
} 

Zurück in der übergeordneten Komponente sucht der Ereignis-Listener wie folgt aus:: auf

document.addEventListener('option-changed', (e) => { 
    this.rowData[e['detail']['row']].colName = e['detail']['value']; 
}); 

Es ist ein etwas längeres Beispiel mit kontextuellen Detail

Die CellRenderers wie folgt aussehen sollte mein Blog unter velociter.blogspot.co.uk

Hoffe, das hilft!