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

문의 주신 내용에 답변 드립니다.

1. 제한적 셀 병합 문의

=> 그리드의 제한적 셀 병합을 구현하기 위해서는 사용자 정의 병합 관리자를 이용하시면 됩니다. 아래 샘플은 링크의 경우, country 열에 따라 customer 셀의 값이 병합 처리되고 있으며 참고 부탁 드립니다.

예제 링크 : https://demo.grapecity.co.kr/wijmo/learn-wijmo/Grid/Merging/RestrictedMerging/react 

추가적으로 Wijmo React의 기본적인 튜토리얼 예제의 경우 클래스형 컴포넌트로 되어 있어, Wijmo 튜토리얼의 모든 예제를 일괄적으로 함수형으로 변환 드리기에는 어려움이 있습니다. 다만, 클래스형에서 함수형 컴포넌트로 변환 중에 문제가 생기신 경우, 저희 쪽으로 회신 주시면 확인 후 도와드릴 수 있도록 하겠습니다. 원하시는 답변을 드리지 못한 점 죄송합니다.

2. 그리드 헤더 정보를 json 객체로 설정 및 가져오기

=> 해당 문의는 현재 확인 중에 있으며 업데이트가 되는 대로 안내 드리도록 하겠습니다. 답변이 늦어지는 점 죄송합니다.

3. 버튼 클릭으로 그룹화된 헤더 확장 축소

=> 버튼 클릭을 통해 열 그룹을 확장/축소하기 위해서는 columnsGroup에서 그룹을 축소할 때 표시하는 하위 열의 바인딩을 포함하는 문자열인 collapseTo를 가진 열에 그룹을 처음에 축소할지 여부를 결정하는 isCollapsed 속성을 아래와 같이 추가하여 구현하실 수 있습니다.

 { header: "Perf", align: "center", collapseTo: "perf.ytd", isCollapsed: true,  (...) },

버튼을 클릭 시 collapseTo 속성을 통해 해당 열이 확장/축소를 하는 열인지 확인하고 맞다면 isCollapsed의 값을 상항 연산자로 계산 및 설정한 뒤, 그리드의 columnGroups에 새롭게 할당하면 그룹열이 한 번에 확장/축소할 수 있습니다. 아래 코드를 참조해주시길 바랍니다.

const [group, setGroup] = React.useState(DataService.getColumnGroups()); //columnGroups 데이터
 
 const onClick = () => {
    var temp = group.map((x) => {
      if (x.collapseTo) { //확장 축소하는 열이라면
        var val = x.isCollapsed ? false : true; // 축소되어 있다면 false를 아니면 true 
        x.isCollapsed = val; // 값 할당
      }
      return x;
    });
    theGrid.columnGroups = temp; //새롭게 할당
  };

(..)
  <button onClick={onClick}>클릭</button>

[columnGroups]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.flexgrid.html#columngroups 

도움말 문서도 같이 전달 드리오니 참고 부탁 드립니다.

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

감사합니다. 

그레이프시티 드림 

* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.