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

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

1. 전체 그리드 및 각 그룹에 대한 데이터의 집계를 나타내는 행을 커스터마이징하여 그리드에 추가하는 방법

그리드에 바인딩된 데이터를 groupDescriptions 속성을 이용하여 특정 열에 대해 그룹화 한 후, 집계를 나타낼 열의 aggregate 속성을 'Sum' 으로 지정하여 전체 그리드 및 각 그룹에 대한 데이터의 집계를 나타낼 수 있습니다. 전체 그리드에 대한 데이터의 집계를 나타내는 행을 맨 하단에 표시하시려는 경우, columnFooter 패널에 GroupRow 를 추가하는 코드를 FlexGrid 의 initialized 이벤트에 작성하시면 됩니다. 

전달해 주신 이미지의 첫 번째 그리드 형태와 같이 각 그룹에 대한 데이터 집계를 나타내는 그룹 행을 그룹의 상단이 아닌 하단에 표시하시길 원하신다면 splice 메서드를 이용하여 해당 그룹 행의 위치를 변경하시면 됩니다. 또한, 각 그룹에 대한 데이터 집계를 나타내는 그룹 행을 커스터마이징 하시려는 경우 FlexGrid 의 formatItem 이벤트를 이용하여 그룹 행에 해당하는 셀을 커스터마이징 하시면 됩니다.

자세한 코드는 아래의 샘플을 참고해 보시기 바랍니다.

샘플에서는 formatItem 이벤트에 innerHTML 속성을 통해 그룹을 접는 버튼을 그룹 행에서 제거하고 style 속성을 통해 그룹 행의 CSS 스타일 속성을 지정하는 코드를 작성하여 그룹 행을 커스터마이징 하였습니다.

이와 관련된 API 문서를 공유 드리오니 참고해 보시기 바랍니다.

- 데이터 아래에 집계 표시 (React)

- 사용자 정의 집계 (React) 데모

- initialize API 문서

- formatItem API 문서

- groupDescriptions API 문서

- aggregate API 문서

2. FlexGrid 컨트롤의 속성 혹은 메서드를 이용해 전체 그리드 및 각 그룹에 대한 데이터의 집계를 구하는 방법

해당 문의와 관련하여 1번 항목의 내용을 참고해 주시기 바랍니다.

3. 그리드의 마지막 열 헤더의 버튼 클릭 시 매개 변수가 전달된 사용자 정의 함수를 호출하는 방법

formatItem 이벤트를 통해 그리드의 마지막 열 헤더에 버튼을 생성 후, 해당 버튼의 클릭 이벤트에 매개 변수가 전달된 사용자 정의 함수를 호출하는 코드를 작성하시면 됩니다.

이때 버튼이 존재하는 셀의 정보를 이용하시려는 경우, 아래의 코드와 같이 사용자 정의 함수를 통해 버튼의 클릭 이벤트를 지정해 주셔야 합니다.

  grid.formatItem.addHandler((s, e) => {
    // 버튼 추가
    if (e.panel == s.columnHeaders) {
      if (e.col == 3) { // 그리드의 맨 마지막 열
        e.cell.innerHTML = "<button>Button</button>";
        // 버튼 클릭 이벤트 추가
        // click 메서드 호출 시 e.cell 값이 업데이트 되어 잘못된 값이 들어가는 것을 방지
        addButton(e.cell, "매개 변수");
      }
    }
  });

  // 버튼에 클릭이벤트 추가
  function addButton(cell, string) {
    let button = cell.querySelector("button");
    button.addEventListener("click", function (event) {
      click(cell, string); // -> 매개변수가 전달된 사용자 정의 함수를 호출하는 자리
    });
  }

  // 매개 변수가 전달된 사용자 정의 함수
  function click(p, s) {
    // 열 헤더의 버튼이 클릭 되었을 때
    if (p.querySelector("button")) {
      console.log(s);
    }
  }

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

감사합니다.

그레이프시티 드림