[ag grid] 키보드이벤트 제어하기, 선택 범위 재 지정하기

vue.js로 작업한 내용 기반으로, 전역변수 사용을 위해 this.를 사용하였다.

바닐라 js사용시 해당부분 참고하면 된다!

 

 

 

셀 내에서 ctrl + a 이벤트가 발생했을때

셀 전체선택이 아닌, 내가 원하는 범위를 재지정 해야하는 필요성이 있었다.

이를 위해 키보드이벤트 제어와 범위 재조정 API 가 요구된다.

 

 

 

1. 기본 옵션 셋팅 - gridOptions

기본 그리드 옵션 지정을 위해 gridOptions에 셋팅을 해야한다.

defaultColDef라는 변수를 만들어 defaultColDef옵션에 해당 변수를 셋팅한다.

 

this.gridOptions = {

columnDef: this.columnDefs,

rowData: this.rowData

...

defaultColDef: this.defaultColDef

}

 

 

2. 키보드 제어로직 - defaultColDef

defaultColDef에 옵션을 셋팅하여 그리드의 기본 옵션값을 지정해준다.

기본 옵션 몇개를 같이 셋팅해보도록 하자.

this.defaultColDef = {
    width: 75,
    minWidth: 75,
    editable: true,
    resizable: true,
    suppressMenu: true, (컬럼헤더에 메뉴 제외)
    suppressMovable: true, (컬럼간 이동 제어),
    cellStyle: { 'border-right: '1px solid lightgray' },
    suppressKeyboardEvent: (params) => {
    	const event = params.event
        const key = event.key
        
        const KEY_A = 'a'
        
        const suppressKeys = []
        
        if (event.ctrlKey || event.metaKey) {
        	suppress.push(KEY_A)
            if (key === KEY_A) { this.remakeRange() }
        }
        return suppress
    }
}

 

여기서 키보드 제어를 위한 부분에 집중하자(suppressKeyboardEvent)

ctrl + a 이벤트 발생시, 전체 그리드가 선택되며,

나는 해당 이벤트 발생시 내가 원하는 범위로 선택되도록 제어해야했기 때문에

ctrl + a 이벤트가 발생할시,

해당 이벤트를 막아 ag grid에서 자체제공하는 전체선택을 제어한 후

내가 원하는 범위로 지정하는 remakeRange 함수를 수행하는 식으로 로직을 구성했다.

 

 

3. API 정보

 

범위 재지정 시에는 ag grid의 addCellRange 라는 API를 사용하였다.

기존 range가 있을경우 중복선택 될 수 있기에

clearRangeSelection API를 먼저 수행하여 기존 범위를 제거한 후 진행하였다.

함수는 다음과 같다.

 

remakeGridRange () {
      const allColumnsField = this.columnDefs.map(el => el.field).slice(1)

      this.gridOptions.api.clearRangeSelection() // 기존 범위가 있다면 제거
      const rowLength = this.gridOptions.api.getDisplayedRowCount() - 1

      this.gridOptions.api.addCellRange({
        rowStartIndex: 0,
        rowEndIndex: rowLength,
        columnStart: allColumnsNm[0],
        columnEnd: allColumnsNm[allColumnsNm.length - 1]
      })
    },

 

 

 

addCellRange API는 다음 이미지와 공식문서를 참고하자.

https://www.ag-grid.com/javascript-data-grid/range-selection/

 

4. 트러블슈팅

트러블***

columnStart 와 columnEnd에 컬럼 headerName을 적었는데 자꾸 찾을수 없다고 반환이 왔다.

 

 

해결***

각각 값은 headerName이 아니라 컬럼의 field값을 입력해야한다.

 

 

 

 

 

5. 예시

다음은 ag grid 예시 사이트에서 해당 기능을 테스트해본 내용이다.