agGrid edit 에러

- 문제

agGrid에서 columnDefs를 아래와 같을 때

"VALUE" 필트의 editable 속성은 true인데 edit이 되지 않는 문제가 발생했습니다.

let columnDefs = [
    {
        "field": "NAME",
        "headerName": "NAME",
        "width": 200,
        "sortable": true,
        "filter": true,
        "flex": 1,
        "minWidth": 100,
        "resizable": true,
        "editable": false,
        "cellEditor": "",
        "cellEditorParams": "",
        "valueFormatter": "",
        "pinned": null,
        "cellStyle": "",
        "rowDrag": "",
        "colId": "NAME",
        "rowGroup": false,
        "rowGroupIndex": null,
        "pivot": false,
        "pivotIndex": null,
        "aggFunc": null,
        "sort": null,
        "sortIndex": null,
        "headerCheckboxSelection": false,
        "checkboxSelection": false,
        "showDisabledCheckboxes": false
    },
    {
        "field": "VALUE",
        "headerName": "VALUE",
        "width": 200,
        "sortable": true,
        "filter": true,
        "flex": 1,
        "minWidth": 100,
        "resizable": true,
        "editable": true,
        "cellEditor": "",
        "cellEditorParams": "",
        "valueFormatter": "",
        "pinned": null,
        "cellStyle": "",
        "rowDrag": "",
        "colId": "VALUE",
        "rowGroup": false,
        "rowGroupIndex": null,
        "pivot": false,
        "pivotIndex": null,
        "aggFunc": null,
        "sort": null,
        "sortIndex": null
    }
]

 

 

- 원인

cellEditor속성을 지정하지 않았을 때 editable속성이 true이면 'agCellEditor'라는 default 값을 가지는데

위에서 공백으로 들어가서 발생하는 에러였습니다.

 

- 해결

columDefs를 직접 입력하는게 아니라 아래와 같이 그리드로 설정해서 가져오도록 되어있기 때문에 아래처럼 설정하여 불러오는 방식이였기 때문에 아래코드를 추가했습니다.

  if (parameter == 'cellEditor' && newCol['editable']) {
    if (prop == '') {
      prop = 'agCellEditor';
    }
  }

 

- 코드

//속성 적용 코드 일부
onGridReady: function (api) {
        let key = api.gridOptionsService.eGridDiv.parentNode.parentNode.parentNode.getAttribute('id');
        this.agGrids[key] = api;
        let wrapper = document.getElementById(key);
        api.gridOptionsService.eGridDiv.style.height= wrapper.style.height;
        api.gridOptionsService.eGridDiv.style.width = wrapper.style.width;
        if (wrapper.getAttribute('gridProp') != null) {
            if (JSON.parse(wrapper.getAttribute('gridProp')).columnDefs != undefined) {
                let columnDefs = JSON.parse(wrapper.getAttribute('gridProp')).columnDefs;
                api.setColumnDefs(columnDefs);
            }
            if (JSON.parse(wrapper.getAttribute('gridProp')).gridOptions != undefined) {
                let gridOptions = JSON.parse(wrapper.getAttribute('gridProp')).gridOptions;
                for(let i = 0; i < Object.keys(gridOptions).length; i++){
                    let key = Object.keys(gridOptions)[i];
                    api.gridOptionsService.gridOptions[key] = gridOptions[key];
                }
            }
        }
    },

 

//속성 설정 코드 일부    
exportData: function () {
  let rowData = this.getAllRows(this.gridApi);
  let colDef = this.gridApi.getColumnDefs();

  let newColDef = [];
  for (let i = 1; i < colDef.length; i++) {
    let colName = colDef[i].headerName;
    let newCol = {};
    for (let j = 0; j < rowData.length; j++) {
      let parameter = rowData[j].parameter;
      let prop = rowData[j][colName];
      if (String(prop) == 'true') {
        prop = true;
      } else if (String(prop) == 'false') {
        prop = false;
      } else if (prop != '' && !isNaN(prop)) {
        prop = Number(prop);
      }
      if (parameter == 'cellEditor' && newCol['editable']) {
        if (prop == '') {
          prop = 'agCellEditor';
        }
      }
      newCol[parameter] = prop;
    }
    newColDef.push(newCol);
  }

  let selectedGridApi = this.gridProp.getObj();
  selectedGridApi.setColumnDefs(newColDef);

  this.applyGridOption();
},