기록

- 문제 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", "row..

api 가져오기 그리드가 생성 될 때 배열에 저장해뒀다가 사용 onGridReady: function (api) { this.agGrids = [] this.agGrids.push({key: api}); } onGridReady: function (api) { this.agGrids = {} this.agGrids.[key] = api; } set Data api.setRowData([]); get Data //한 줄 api.getRowNode(id); //모두 getAllRows(api); getAllRows(api) { let rowData = []; api.forEachNode(node => rowData.push(node.data)); return rowData; } //선택된 것 api.getS..

onSelectionChanged와 onRowSelected는 모두 ag-Grid에서 row selection 관련 이벤트를 처리하기 위한 콜백 함수입니다. 두 함수는 파라미터가 다르므로 필요한 데이터에 따라 선택하여 사용하면 될 것 같습니다. 1. onSelectionChanged api.getSelectedNodes() 및 api.getSelectedRows() 메서드를 사용하여 선택한 노드/행 데이터의 새 목록을 가져옵니다. api.getSelectedNodes() 메서드는 선택된 모든 row의 Node 객체를 반환합니다. api.getSelectedRows() 메서드는 선택된 모든 row의 데이터 객체를 반환합니다. // gridOptions 객체 설정 var gridOptions = { onSe..

ag-Grid에서 rowSelection 속성을 multiple 또는 single로 설정하여 다중 또는 단일 선택을 활성화할 수 있습니다. 팝업창에 rowSelection속성이 multiple인 그리드가 있고, 팝업을 닫을 때 선택했던 row를 저장해뒀다가 다시 팝업을 열 때 저장된 데이터를 그리드에서 선택되도록 하려고 합니다. ag-Grid에서 row를 동적으로 선택하기 위해서는 다음과 같은 두 가지 방법을 사용할 수 있습니다. 1. selectNode api.selectNode(node, tryMulti): 지정된 노드를 선택하고 선택한 상태로 변경합니다. node: 선택할 노드입니다. tryMulti (선택적): true로 설정하면 노드를 다중 선택할 수 있습니다. 예를 들어, 특정 인덱스의 노드를..

agCellEditor 기본 input default 값으로 editable을 true로 주고 cellEditor을 설정하지 않았을 때 나타난다. let colDef = [ { field: 'columnID', headerName: 'columnID', editable: true, cellEditor: 'agCellEditor', cellEditorParams: {} }, { field: 'type', headerName: 'type' } ]; agSelectCellEditor 무료 버전인 ag-grid-community에서 사용할 수 있는 select 옵션입니다. let colDef = [ { field: 'columnID', headerName: 'columnID', editable: true, ce..

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; /* onGridReady(api) { let node = a..

AgGrid의 gridApi는 그리드 인스턴스에 대한 프로그래밍적인 제어를 제공하는 반면, columnApi는 그리드 컬럼에 대한 제어를 제공합니다. gridApi를 사용하여 할 수 있는 작업은 다음과 같습니다. 행 추가/삭제/갱신하기 셀 값 설정하기 열 너비/높이 조정하기 필터링 및 정렬하기 선택된 행/셀 가져오기 그리드 전체 데이터 가져오기 커서 이동하기 그리드 리사이즈하기 columnApi를 사용하여 할 수 있는 작업은 다음과 같습니다. 컬럼 추가/삭제하기 컬럼 순서 변경하기 컬럼 필터링하기 컬럼 그룹핑하기 컬럼 정렬하기 gridOptionsService는 그리드 인스턴스의 속성 값을 가져오거나 변경하는 기능을 제공합니다. 이를 통해 그리드의 기본 동작을 변경하거나 초기값을 설정할 수 있습니다. 예..