[리액트 React] How to get the data of the clicked row in the React Kendo Grid / 리액트 타입스크립트 kendo grid에서 클릭한 row data 구하기

안녕하세요.

디자인도 하고 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 리액트 켄도 그리드에서 클릭한 행의 데이터를 가져오는 방법에 대해 공유하겠습니다.

(In this post, I will share how to get the data of the clicked row in the React Kendo Grid.)

 

이 포스팅은 이미 켄도를 설치해서 적용했다는 가정 하에 작성되었고,

리액트 타입스크립트로 구성되어 있습니다.

 

import한 GridCellProp를 통해 row data를 가져올 수 있고,

해당 데이터를 state에 담아서 사용하면 됩니다.

 

저 같은 경우는 apiData를 다른 파일에서 import해서 사용했습니다.

Cell 안에 '더보기' 버튼을 만들어서 해당 버튼을 클릭하면

state인 modalShow.show가 true로 변하여 모달을 열도록 했으며.
모달은 따로 컴포넌트로 빼줘서 사용했기 때문에 해당 코드에는 안 보입니다.

 

주목해야 할 부분은 주석으로 표시해두겠습니다 :)

import React, {useState} from 'react';
import {
  Grid,
  GridColumn as Column,
  GridDataStateChangeEvent,
  GridCellProps, // 여기 주목
  GridToolbar,
  GridFilterCellProps,
} from '@progress/kendo-react-grid';

export default({apiData}: {apiData: any}} => {
    const [modalShow, setModalShow] = useState({
        show: false,
        data: {
          storeName: '',
          memberName: '',
        },
    });
    
	return (
        <Grid
            pageable={{
                pageSizes: [10, 20, 50, 100, 200, 300],
            }}
            sortable={true}
            filterable={true}
            style={{width: '100%'}}
            data={process(apiData, dataState)}
            navigatable={true}
            {...dataState}
            onDataStateChange={(e: GridDataStateChangeEvent) => {
            setDataState(e.dataState);
        }}>
            <Column field="storeName" title="지점명" width="180" locked={true} />
            <Column field="memberName" title="점주명" width="150" />
            <Column field="phone" title="번호" width="150" />
            <Column field="si" title="시/도" width="150" />
            <Column field="gu" title="시/군/구" width="150" />
            <Column field="paid" title="급여정산일" width="150" />
            <Column field="size" title="사업장규모" width="150" />
        	<Column field="employee" title="근무직원수" width="150" />
            <Column field="closeFlag" title="영업상태" width="130" />
            <Column field="openDay" title="개점일" width="150" />
            <Column field="closeDay" title="폐점일" width="150" />
            <Column
                title="더보기"
                width="100"
                filterable={false}
                locked={true}
                // 여기 주목
                cell={(props: GridCellProps) => (
                  <td>
                    <div
                      onClick={() =>
                        setModalShow({
                          ...modalShow,
                          show: true,
                          data: props.dataItem, // 여기 주목
                        })
                      }>
                      더보기
                    </div>
                  </td>
                )}
            />
        </Grid>
	)
}