본문 바로가기

프론트엔드/[그리드] ag-grid

(3)
[ag-grid] no rows to show 문구 제거하기 gridOptions 객체에 suppressNoRowsOverlay 키에 true값을 부여하면 됨. gridOptions의 api를 사용해 처리해도 되지만, 나는 초기화될때 처리하면 됐기에 디폴트 옵션값으로 설정했다. 참고링크 https://stackoverflow.com/questions/51070840/how-to-avoid-the-no-rows-message-while-loading-data-in-ag-grid How to avoid the "no rows" message while loading data in ag-grid I have an ag-grid which pulls data from the backend via restful call and routed through NGRX patte..
[ag grid] 키보드이벤트 제어하기, 선택 범위 재 지정하기 vue.js로 작업한 내용 기반으로, 전역변수 사용을 위해 this.를 사용하였다. 바닐라 js사용시 해당부분 참고하면 된다! 셀 내에서 ctrl + a 이벤트가 발생했을때 셀 전체선택이 아닌, 내가 원하는 범위를 재지정 해야하는 필요성이 있었다. 이를 위해 키보드이벤트 제어와 범위 재조정 API 가 요구된다. 1. 기본 옵션 셋팅 - gridOptions 기본 그리드 옵션 지정을 위해 gridOptions에 셋팅을 해야한다. defaultColDef라는 변수를 만들어 defaultColDef옵션에 해당 변수를 셋팅한다. this.gridOptions = { columnDef: this.columnDefs, rowData: this.rowData ... defaultColDef: this.defaultC..
[ag-grid] ag-grid cell에 값이 나타나지 않는 문제 해결하기 에러내용 ag grid에서 headerName이 '컬럼명'인 컬럼에만 편집모드 옵션을 활성화했다. 그랬더니 필드값이 그리드상에 그려지지 않는 문제가 발생하였다. 셀을 클릭하여 편집모드를 활성화해보니 값을 가지고는 있으나 랜더링이 되지 않는 문제가 발생됐다. 해결방안 기본 그리드는 렌더러를 수행해야한다. 따라서 셀 렌더러(cellRenderer)로 파라미터값을 렌더링함으로써 해결할 수 있다. // 예시 let columnDefs = [ { headerName: 'No', field: 'id' }, { headerName: '컬럼명', field: 'columnName', cellRenderer: (params) => { return params.value } }, ] 참고링크 : https://stacko..