[REACT] ag grid editable select box renderer

---

오늘은 이렇게 ag grid에서 수정 버튼을 누르면 select box가 활성화되어 값을 변경할 수 있도록 구현해보겠습니다

 

---

1. cell Renderer 지정해주기

애초에 데이터를 받아올 때 휴직, 재직이라는 값을 받아와서 select box의 value로 넣어주어야합니다.

꼭 그래야한다는 건 아니고 그러고 싶다는 뜻

 

import { MenuItem, Select } from '@mui/material';
import clsx from 'clsx';
import React, { useState } from 'react';
import UserStyles from '../User.style';

const CellSelectRenderer = params => {
  const user_classes = UserStyles();
  1️⃣ const columnField = params.colDef.field;
  let selectMenuGroup = [];

  2️⃣if (columnField === 'test') {
    selectMenuGroup = [
      {
        value: true,
        label: 'Y',
      },
      {
        value: false,
        label: 'N',
      },
    ];
  }
  const [selectedValue, setSelectedValue] = useState(params.value);

  const handleUserGroupChange = event => {
    setSelectedValue(event.target.value);
  };

  3️⃣let editingCells = params.api.getEditingCells();

  4️⃣let isCurrentRowEditing = editingCells.some(cell => {
    return cell.rowIndex === params.node.rowIndex;
  });

  return (
    <Select
      className={clsx(user_classes.selectBox)}
      disabled={isCurrentRowEditing ? false : true}
      value={selectedValue}
      onChange={handleUserGroupChange}>
      {selectMenuGroup.map((p, index) => (
        <MenuItem key={index} value={p.value}>
          {p.label}
        </MenuItem>
      ))}
    </Select>
  );
};

export default CellSelectRenderer;

cellRenderer는 params로 grid 정보를 받아옵니다.

그 안의 정보 중 컬럼 정보를 가져와서 해당 필드인 컬럼의 셀을 

이 select box로 만들어주겠다는 뜻입니다.

 

그리고 이 컬럼이 수정상태일때 disabled가 false가 되고 안되고의 코드는 3,4 번입니다.

 

 

 

 

 

2. 그리드에서 cell Renderer설정해주기

    <AgGridReact
          rowData={user_accounts}
          ref={gridRef}
          onGridReady={onGridReady}
          localeText={AG_GRID_LOCALE_KO}
          className={clsx(classes.agGrid, 'ag-theme-alpine')}
          1️⃣gridOptions={gridOptions}
          frameworkComponents={{
            actionCellRenderer: ActionCellRenderer,
            cellSelectRenderer: CellSelectRenderer,
          }}>

AgGridReact에서 frameworkComponents에 컴포넌트를 등록해줍니다. 

오른쪽에 붙어있는 수정, 삭제 버튼에 관한 정보는 아래의 포스팅을 참고해주세요

2022.02.21 - [WEB/REACT] - [REACT] ag grid full row editing , delete/ ag grid row 수정, 삭제

[REACT] ag grid full row editing , delete/ ag grid row 수정, 삭제

     <AgGridColumn
            field="test"
            headerName="테스트"
            editable={false}
            cellRenderer="cellSelectRenderer"
            filter="agSetColumnFilter"
          />

그리고 해당하는 컬럼 (필드가 같아야함) 에 cellRenderer을 지정해줍니다.

여기서 주의해야할 점은 editable={false}가 설정되어있어야한다는 점인데요!

그렇지 않으면 cell자체가 editing이 가능하게 되어서 그냥 텍스트가 입력될 수 있습니다.

 

여기서 끝이 아닙니다.

위에 코드에 1번 부분에 gridOptions를 설정해주었어요.

그리드 옵션을 살펴보겠습니다.

 

 

 

 

 

3. gridOptions설정

export const gridOptions = {
  localeText: AG_GRID_LOCALE_KO, // 언어 설정
  defaultColDef: defaultColDef, // 컬럼 기본값 설정
  groupDisplayType: 'multipleColumns',
  ...
  onRowEditingStarted: params => {
    params.api.refreshCells({
     1️⃣ columns: ['test'],
      rowNodes: [params.node],
      force: true,
    });
  },
  onRowEditingStopped: params => {
    params.api.refreshCells({
     2️⃣ columns: ['test'],
      rowNodes: [params.node],
      force: true,
    });
  },
};

그리드 옵션은 이렇게 그리드에 관련된 모든 속성을 넣을 수 있습니다.

그 중에서 이번 구현에 가장 필요한 코드는 1번 2번 코드입니다.

우리가 select박스로 만들고 싶은 컬럼의 필드명을 해당 부분에 적어주어야합니다.

 

 

이제 구현 완성입니다.