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

먼저 답변이 지연되어 죄송합니다.

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

1. Excel 파일에서 가져온 데이터가 바인딩 된 그리드의 데이터 초기화 후 다른 데이터를 바인딩 하는 방법

FlexGrid 는 collectionView 속성을 통해 바인딩 된 데이터에 대한 열을 자동적으로 생성합니다. Excel 파일의 데이터를 FlexGrid 에 바인딩 시, 데이터는 각 행에 내부적으로 바인딩 되며 이로 인해 FlexGrid 의 collectionView 속성의 값은 null 이 됩니다. 이때 새로운 데이터를 FlexGrid 에 바인딩 하는 경우, FlexGrid 는 collectionView 속성을 통해 새 데이터에 대한 열을 생성하려 하지만 기존의 Excel 파일의 데이터로 인해 생성된 열을 제거하지는 않습니다. 

따라서 Excel 파일의 데이터가 바인딩 된 FlexGrid 에 새로운 데이터를 바인딩 하시려는 경우, 아래의 코드와 같이 itemsSource 속성을 통해 FlexGrid 의 데이터를 변경 한 후 기존의 Excel 파일의 데이터로 인해 생성된 열을 splice 메서드를 이용해 제거하시면 됩니다.

  function click(e) { // FlexGrid 에 데이터 재바인딩
    grid.itemsSource = source;
    updateColumns(grid); // Excel 파일의 데이터로 인해 생성된 열 제거
  }

  function updateColumns(flex) {
    // Excel 파일의 데이터가 바인딩된 열 제거
    for (let i = 0; i < flex.columns.length; i++) {
      if (!flex.columns[i].binding) { // binding 속성이 null 인 열
        flex.columns.splice(i, 1);
        i--;
      }
    }
  }

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

- itemsSource API 문서

- columns API 문서

- binding API 문서

2. Excel 파일에서 가져온 데이터가 바인딩된 그리드에 필터를 적용하는 방법

FlexGridFilter 컨트롤의 경우, FlexGrid 의 collectionView 속성 값을 이용하여 생성되게 됩니다. 따라서 1번 항목의 내용과 같이, Excel 파일의 데이터가 바인딩 된 FlexGrid 는 collectionView 속성 값은 null 이므로 FlexGridFilter 컨트롤이 생성되지 않습니다.

Excel 파일의 데이터가 바인딩 된 FlexGrid 에 FlexGridFilter 컨트롤을 생성하시려는 경우, loadAsync 메서드의 onLoaded 매개 변수에 Excel 파일의 데이터를 이용하여 생성된 CollectionView 객체를 FlexGrid 의 itemsSource 속성에 지정하는 사용자 정의 함수를 지정하시면 됩니다.

이때, 1번 항목의 내용과 같이 itemsSource 속성을 통해 데이터를 변경하더라도 Excel 파일의 데이터로 인해 생성된 열은 제거되지 않습니다. Excel 파일의 데이터로 인해 생성된 열을 제거하기를 원하시는 경우, 사용자 정의 함수에 binding 속성의 값이 null인 열을 제거하는 코드를 추가하시면 됩니다.

자세한 코드는 아래의 샘플을 참고해 주시기 바라며, 샘플을 '파일 선택' 버튼 클릭>Excel 파일 선택>'가져오기' 버튼 클릭 순서로 이용하여 Excel 파일의 데이터가 바인딩 된 그리드의 열 헤더에 생성된 필터를 확인해 보시기 바랍니다.  

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

- loadAsync API 문서

- FlexGridFilter (React) 데모

- FlexGridFilter Class API 문서

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

감사합니다.

그레이프시티 드림