(Vue2) Ag-grid 선택 row포커스 유지

Ag-grid를 사용하는 프로그램에서 그리드의 row를 사용자가 선택한 후 

영역 바깥쪽을 클릭해도 해당 포커스가 남아있도록 하는 기능을 구현해야 했습니다.

 

이 기능을 수행하기 위해서는 gridApi를 사용해야 하는데 해당 기능을

사용하기 위해서는 gridOptions.api를 할당해주어야 합니다. 

저는 vue의 라이프사이클 중 하나인 mounted에서 

 

this.gridApi = this.gridOptions.api;  와 같이 넣어주었습니다.

 

만약 여러개의 그리드를 사용한다면 변수를 여러 개 만들어서 넣어주면 되는데

 

this.gridApi = this.필요한그리드의 gridOptions로 넣은 값의 이름.api;

와 같은 형태입니다. 

 

코드로 예를 보자면

ex)

 

template 에서 

 

<ag-grid-vue 

      :rowData = "rowData"

      :gridOptins="testGridOptions"

</ag-grid-vue>

 

와 같이 지정해주었다면 

 

mounted에서 아래와 같이 할당해주면 됩니다.

this.gridApi = this.testGridOptions.api;

 

이제 row를 클릭하는 이벤트에 콜백 되는 함수 내부에서

let index  = this.gridApi .getFocusedCell(); 를 사용하여 해당 그리드의 선택 인덱스 정보를 가져오고

this.gridApi.getDisplayedRowAtIndex(index.rowIndex).setSelected(true); 을 사용하여 

해당 인덱스에 강제적으로 선택됨 상태를 true로 바꿉니다.

 

이렇게 변경하면 다른 이벤트가 발생해도 그리드 row 이벤트가 발생할 때까지 셀렉트 

위치는 바뀌지 않기 때문에 row 포커스 모양이 유지됩니다.

 

정리하자면

1. testGridOptions을 할당한 gridApi(변수)에 할당한다

2. this.gridApi.getFocusedCell(); 를 사용하여 그리드에 선택된 인덱스 정보를 받아온다.

3. this.gridApi.getDisplayedRowAtIndex(index.rowIndex).setSelected(true); 를 사용하여 포커스를 유지시킨다.

  ( index.rowIndex는 원하는 인덱스 숫자로 바꿀 수 있습니다. setSelected를 false로 바꾸면 포커스가 풀립니다)