Можем ли мы отложить загрузку данных для раскрывающегося списка во время встроенного редактирования?

Я работаю над функциональностью встроенного редактирования с помощью ag- сетка.

Согласно официальной документации: ag-Grid Cell Editing, мы можем предоставить значения параметров раскрывающегося списка, указав само определение столбца colDef.

colDef.cellEditor = 'selectCellEditor';
colDef.cellEditorParams = {
    values: ['English', 'Spanish', 'French', 'Portuguese', '(other)']
}

Что делать, если эти значения нужно получить с сервера? т.е. можем ли мы отложить загрузку, а затем предоставить cellEditorParams значений для раскрывающегося списка? (Я не встречал)

Любое решение или даже направление приветствуются.


javascript ag-grid ag-grid-ng2
person Paritosh    schedule 02.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете создать собственный компонент редактора, имеющий раскрывающийся список в качестве шаблона, и выполнить HTTP-вызов для загрузки данных для раскрывающегося списка.
т.е. при создании ColDef для столбца,

let column: ColDef = {
        headerName: 'Lookup', field: 'FieldName', coldId: 'Id'
        cellEditorFramework: DropdownEditorComponent,
        cellEditorParams: {} // whatever data you want to have in editor component
}

В компоненте редактора

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { ICellEditorAngularComp } from 'ag-grid-angular';
import * as _ from 'underscore';
// import HttpService

@Component({
    template: `
    <select [(ngModel)]="selectedValue" (change)="selectionChanged()" #dropdown>
        <option *ngFor="let item of items" [ngValue]="item">{{item.label}}</option>
    </select>
    `
})

Определение компонента:

export class DropdownEditorComponent implements ICellEditorAngularComp, AfterViewInit {

    private params: any;
    private items: any[];
    private selectedValue: any;
    private selectControl: ElementRef;

    @ViewChild('dropdown') dropdown: ElementRef;

    constructor(private http: HttpService) {
        this.items = [];
    }        
    ngAfterViewInit() {
        this.selectControl = this.dropdown;
    }

    agInit(params: any): void {
        if(this.items.length == 0) {
            this.params = params;
            this.http.post(url, params)
            // this.http.get(url) // if the call is a GET
                .subscribe(result => {
                    this.items = result;
                    this.selectedValue = _.find(this.items, item => item.label == params.value);
                });
        }
    }

    getValue(): any {
        return this.selectedValue.label;
    }
    isPopup(): boolean {
        return false;
    }
    setValue(value: any): any {
        this.selectedValue = value;
    }
    selectionChanged(): void {
        // whatever you want to do
    }
}
person Paritosh    schedule 12.01.2018
comment
Разве нельзя получить метод http? - person hbthanki; 21.12.2018