[20230117 TIL] AG-GRID 원하는 그리드 행 선택되게 하기 (setSelected)

* 구조

화면에 2개의 그리드가 존재. 왼쪽 그리드 행을 클릭하면 상세 정보가 오른쪽 그리드에 뜸.

 

* 만들고자 했던 기능

왼쪽 그리드 행을 클릭한 후 상세 정보를 수정중에 왼쪽 그리드 다른 행을 클릭할 때 '작성중입니다. 저장하지 않고 조회 진행하시겠습니까?' alert 창이 뜰 수 있게 하고, 확인을 누르면 조회를 진행 / 취소를 누르면 현상태를 유지시키려고 했다.(return)

 

* 문제 발생

return을 시켜도, 다른 행을 클릭했던게 계속 남아있었다. 왼쪽 그리드에서 클릭된 행과 오른쪽 그리드의 상세정보가 서로 맞지 않게 된 것.

 

* 해결 방안

강제로 다시 기존 행을 클릭하도록 만들기로 했다. 이때 setSelected 함수를 사용했다. 

forEachNode는 모든 노드를 다 보는데 (map같은 느낌인듯 싶다)

그 노드들 중에 오른쪽 그리드의 상세정보 name과 같은 노드를 찾아 선택을 시켜주는 것이다. 

 

const setSelectedRows = (name: any) => {
        gridRef?.current?.api.forEachNode((node: any) => {
            node.setSelected(node.data.cdNm === name);
        });
    };

/* 그리드 행 클릭 */
const onCellClicked = async (params: any) => {
        const name = detailList.find((el) => el.setting === 'name')?.value;
        // 작성 중 조회 버튼 누르면 알림 팝업
        if (isChanged) {
            if (params[0]?.cdNm !== name) {
                const bConfirmed = await openConfirm('작성중입니다.\n저장하지 않고 조회 진행하시겠습니까?');
                if (!bConfirmed) {
                    setSelectedRows(name);
                    return;
                }
            } else return;
        }
        <생략>
  }