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

그리드를 selector로 감싸는 경우 grid 정보에 접근하는 방법에 대한 문의 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS 그리드를 selector로 감싸는 경우 grid 정보에 접근하는 방법에 대한 문의

페이지 정보

작성자 jaylee 작성일 2024-03-13 16:36 조회 56회 댓글 0건
제품 버전 : "@grapecity/wijmo.react.all": "^5.20232.939",
컨트롤 이름 : FlexGrid

본문

안녕하세요.

체크박스를 사용하기 위해 grid를 Selector 로 감싸서 사용중입니다.


const initGrid = useEvent(grid => {
gridRef.current = new Selector(grid)
}


이 경우에 gridRef.current 는 Selector 객체의 인스턴스가 되는데요

데이터 조회 후, columnFooters 등의 제어를 위해 grid 객체가 필요한 상황입니다.

그리고 columnFooters 의 셀을 머지해야 하는데 샘플코드를 제공해 주시면 감사하겠습니다.


1. gridRef.current 에서 grid 정보를 참조하는 

2. gridRef.current 에서 columnFooters 정보를 참조하는 

3. columnFooters 셀을 머지하는 방법




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

댓글목록

등록된 댓글이 없습니다.

1 답변

ReactJS Re: 그리드를 selector로 감싸는 경우 grid 정보에 접근하는 방법에 대한 문의

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-03-14 08:41 댓글 0건

본문

안녕하세요 메시어스입니다.


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


1. grid 정보를 참조하는 방법

=> Selector 는 FlexGrid를 인자 값으로 전달하여 Selector를 생성합니다. 따라서 gridRef를 이용하여 Grid를 참조하고 싶으신 경우, 별도 변수를 두어 Selector의 인스턴스를 저장해주신 다음 이전에 안내드린 것처럼 gridRef.current에 그리드 인스턴스를 저장 및 참조해주시는 것을 추천드립니다.


아래 코드 및 데모를 확인하시길 바랍니다.


const selectorRef = useRef(null);
const gridRef = React.useRef();

const initializedGrid = useEvent((flex) => {
    gridRef.current = flex;
    selectorRef.current = new Selector(grid);
  });


- 체크박스 선택 데모


2. gridRef.current 에서 columnFooters 정보를 참조하는 방법

=> 앞서 언급드린 방법으로 gridRef.current에 그리드 정보를 저장한 다음, 아래 코드와 같이 columnFooters 속성을 이용하시면 됩니다. 더불어 일반 속성의 경우, 대부분 API 문서에서 쉽고 빠르게 확인할 수 있으니 참고 부탁드립니다.


- columnFooters API 문서

    const initializedGrid = useEvent((flex) => {
        flex.columnFooters.rows.push(new wjcGrid.GroupRow());
        flex.bottomLeftCells.setCellData(0, 0, 'Σ');
        gridRef.current = flex;
    });

    return (<div className="container-fluid">
    <button onClick={()=>console.log(gridRef.current.columnFooters)}>click</button>


3.  columnFooters 영역 병합

=> 이전에 안내드렸던 TopLeft 영역을 병합하는 것과 마찬가지로 mergeManger를 이용하여 구현할 수 있습니다. 아래 참고 글을 공유드리오니 확인 부탁드립니다.


- 위즈모 합계관련하여 문의드립니다. 



다른 궁금한 점이 생기면 문의주시기 바랍니다.


감사합니다.

메시어스 드림

댓글목록

등록된 댓글이 없습니다.

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