! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

column 삭제 및 columns 변경시 다시그리는 방법 > Q&A | 토론

본문 바로가기

ReactJS column 삭제 및 columns 변경시 다시그리는 방법

페이지 정보

작성자 moon7 작성일 2023-07-10 16:23 조회 348회 댓글 1건
제품 버전 : 5.20221.842
컨트롤 이름 : FlexGrid

본문

문의 1. 아래와 소스와 같이 test 값이 true이면 _binding을 false 이면 _binding2를 보이도록 하였으나 변경에 따라서 다시 그리지 않는것 같습니다. 다시그릴수 있는 방법이 있을까요?


const [test, setTest] = useState(false);

const _binding1 = [
{
header: '테스트1',
width: 100,
isReadOnly: true,
align: 'center',
},
{
header: '테스트2',
width: 100,
isReadOnly: true,
align: 'center',
}
];


const _binding2 = [
{
header: '테스트2',
width: 100,
isReadOnly: true,
align: 'center',
}
];

        <FlexGrid
columns={test ? _binding : _binding2}
/>
 


문의 2. binding1 값이 2개 이상일때 특정한 버튼 또는 값을 체크 하여 해당 열(col)를 동적으로 제거 하고 싶습니다. 열제거 하는 방법 문의 드립니다. 

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

GCK루시님의 댓글

GCK루시 작성일

안녕하세요 그레이프시티입니다.

문의하신 내용 중 추가 확인이 필요한 사항이 있어 확인 후, 답변 드릴 수 있도록 하겠습니다.

감사합니다.
그레이프시티 드림

1 답변

ReactJS Re: column 삭제 및 columns 변경시 다시그리는 방법

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK루시 작성일 2023-07-12 11:15 댓글 0건

본문

안녕하세요 그레이프시티입니다.


문의하신 내용에 대해 답변드립니다.


1. 조건부 그리드 열 설정 방법 문의

=> FlexGrid는 test 변수의 초기 값에 따라 열의 배열로 초기화되므로 FlexGrid의 columns 속성에 열 배열을 조건부로 설정하면 작동하지 않습니다. 삼항 연산자를 사용하여 조건부로 열을 변경하기 위해서는 리액트 열 템플릿에 열 정의를 제공해야 합니다. 아래 간단한 코드를 확인하시기 바랍니다.


import * as wjcGrid from "@grapecity/wijmo.react.grid";
(...)
 const [test, setTest] = React.useState(true);

  const columns1 = [
    <wjcGrid.FlexGridColumn header="test 1" binding="test1" key={0} />,
    <wjcGrid.FlexGridColumn header="test 2" binding="test2" key={1} />
  ];

  const columns2 = [
    <wjcGrid.FlexGridColumn header="test 3" binding="test3" key={3} />
  ];

(...)
 function changeTest(s) {
    setTest(!test);
  }


return (
    <div className="App">
      <button onClick={changeTest}>변경</button>
      <div className="container-fluid">
        <wjcGrid.FlexGrid
          autoGenerateColumns={false}
          ref={grid}
          itemsSource={source}
        >
          {test ? columns1 : columns2}
        </wjcGrid.FlexGrid>
      </div>
    </div>
  );


2. 특정 열을 제거하는 방법

=>  해당 기능의 경우,  columns의 removeAt 메서드를 호출하여 특정 인덱스 컬럼을 제거하실 수 있습니다. 아래 코드를 참고하여 주시기 바랍니다.


const grid = React.useRef();
(...)
function removeColumn(){
    if (grid.current.control.columns.length >= 2) {
      grid.current.control.columns.removeAt(0);
    }
}


- removeAt API 문서


관련 API 문서를 공유드리며 다른 궁금한 점이 생기면 문의주시기 바랍니다


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.