AgGrid 옵션

 

    onGridReady: function (api) {
      this.gridApi = api;
      this.gridOption = this.girdApi.gridOptionsService.gridOptions;
      this.gridOption.onCellClicked = function (params) {
        // 기존 onCellClicked 함수 내용을 수행합니다.
        onCellClicked(params);

        // 새로운 내용을 추가합니다.
        console.log('Cell Clicked!', params);
      };
    },

 

1. agGrid의 html 요소 (wapper)에 접근하기

let wapper = api.gridOptionsService.eGridDiv;

/*
<div v-for="agGrid in agGrids" :key="agGrid.id" :tempId="agGrid.id">
  <AgGridSample
    :row-data="rowData"
    :column-defs="columnDefs"
    @grid-ready="onGridReady"
    @grid-basicdata-updated="importData"
  ></AgGridSample>
</div>
onGridReady(api) {
  let node = api.gridOptionsService.eGridDiv.parentNode;
  let pid = api.gridOptionsService.eGridDiv.parentNode.parentNode.parentNode.getAttribute('tempid');
  let wrapper = document.getElementById(pid);
  node.remove();
  wrapper.append(node);//원하는 부모 요소에 추가
}
*/

 

2. gird 로딩 완료 이벤트 추가

      gridApi.addEventListener('firstDataRendered', function () {
        const allData = gridApi.getModel().rowsToDisplay.map(row => row.data);
        // 로딩된 데이터를 이용하여 필요한 작업 수행
      });

 

3. column이 변경(로딩)되었을 때 발생하는 이벤트

      gridApi.addEventListener('gridColumnsChanged', function () {
        const columns = gridApi.getColumnDefs();
        // 컬럼 속성을 변경하거나 추가 작업을 수행
      });