ag-grid colDef가 이벤트간에 일치하지 않는 것으로 나타납니다.

Question

에 따라 documentation ag-grid 열 정의를 사용하여 셀 CSS 클래스를 업데이트 할 수 있습니다. colDef 객체는 newValueHandler 및 cellValueChanged와 같은 열 이벤트에서 사용할 수 있습니다. 나는이 CSS 클래스를 추가/제거하는 데 사용하려고합니다.

그것은 newValueHandler에서 작동하지만 이을 onCellValueChanged에서 작동하지 않습니다. 나는이 두 이벤트는 colDef 개체를 노출 인수 볼 수 있지만 유일한 newValueHandler에 작품을 다음과 같은 수 있습니다 :

dropdownValueUpdateHandler(p, key) { 
     this.svc.updateProductField(p.data.ID, p.colDef.field, p.newValue.code) 
      .catch(err => { 
       p.colDef.cellClass = 'ag-etp-cell-failed'; // <---- updating cell to show error 

마지막 행은 첫 번째 이벤트에서 작동하지만 셀 값 변경 이벤트에 아무것도하지 않습니다.

업데이트 : 동적 기능을 사용하려고 시도하지만 그 중 제대로 작동하지 않는 성공에 내 valueUpdatedHanler에

getCellClass(p){ 
    console.debug('getCellClass ', p); 
    return p.data.Status == 'saved' 
     ? 'ag-etp-cell-saved' 
     : p.data.Status == 'failed' 
      ? 'ag-etp-cell-failed' 
      : ''; 

} 

을 (또는 메신저 잘못 그 일) :

e.data.Status = 'saved'; 
e.api.refreshCells([ e.node] , [e.colDef.field]); // this has a weird lag, doesn't refresh correct, doesn't seem to call getCellClass function 
e.api.refreshView(); // this works but refreshes the whole grid which can be costly 

업데이트를 종류의 일이지만 후속 이벤트가 지연되는 것 같습니다. 예를 들어 이전 이벤트가 실패한 경우 다음 성공은 실패한 스타일로 다시 나타납니다.

전체 격자를 새로 고침하면 작동합니다. 하지만 큰 그리드이기 때문에 그렇게하지 않기를 바랬습니다.

Answer 1

열 정의를 업데이트 할 때 ag-grid에 새로 고침을 지정하여 변경 사항을 적용해야합니다. gridAPI.refreshView()을 호출하여 전체 표를 새로 고치거나 gridAPI.refreshCells(rowNodes, colIds)을 호출하여 해당 셀을 새로 고치면됩니다.

CellClass는 이전에 추가 한 항목을 제거하지 않고 클래스를 셀에 추가하기 만합니다.

당신은 BTW을 AG-그리드의 버전을 사용하는

cellClassRules : { 
    'ag-etp-cell-failed': function(params) { return params.data.Status === 'failed' }, 
//etc 
},