Как изменить стили в ag-grid на событии? - PullRequest
Новая
       12

Как изменить стили в ag-grid на событии?

2 голосов
/ 17 марта 2020

Я просматривал документы ag-grid, но не нашел решения для моей проблемы.

Я хочу, чтобы строка изменила стиль при изменении события, или, другими словами, пометила его как грязное.

В настоящее время мой код выглядит так:

component. html: 

<ag-grid-angular
    class="ag-theme-material table"
    [gridOptions]="gridOptions"
    (gridReady)="onGridReady($event)"
    (cellValueChanged)="cellValueChanged($event)">
</ag-grid-angular>

component.ts 

onGridReady(params) {
    this.gridApi = params.api;
}

cellValueChanged(e) {
    const { data, oldValue, newValue } = e;

    if (newValue != oldValue) {
      this.gridOptions.rowStyle = { background: "#E4FFF9" };
    }
}

Проблема в том, что на первом Событие change: стиль не применяется, и когда я повторно применяю данные, стиль всех строк изменяется, даже если код даже не go соответствует условию «IF».

Re -применение данных с gridApi.setRowData ([]) затем gridApi.setRowData (data). 

private dataChange() {
    this.buyerGridApi.setRowData([]);
    let gridData = [];

    gridData = [...some code]

    this.gridApi.setRowData(gridData);
}

1 Ответ

3 голосов
/ 22 марта 2020

Вы можете использовать getRowStyle для динамического получения стиля строки после изменения данных. См. https://www.ag-grid.com/javascript-grid-row-styles/#refresh -of-styles

В вашей ситуации я бы установил грязное свойство для данных, используя rowNode.setData. Это вызовет повторную визуализацию строки и перезапустит функцию getRowStyle. См. https://www.ag-grid.com/javascript-grid-data-update/#updating -rownodes-data

Вот краткий пример, где нажатие на строку установит грязное свойство и изменит стиль: https://stackblitz.com/edit/angular-ag-grid-dynamic-style?embed=1&file=src / app / app.component.ts

...