디자이너 컴포넌트에서 파일을 불러올 때 이벤트를 발생시킬 수 있습니다.

이벤트

Designer.Events 클래스의 FileLoading과 FileLoaded를 이용하여 이벤트 설정이 가능합니다.

이러한 이벤트는 JSON, Excel, CSV 파일을 불러올 때 발생합니다.

FileType 옵션을 이용하여 특정 파일 형식에 대해 이벤트를 설정할 수 있습니다.

바인딩 메소드

Designer 클래스에서 bind, unbind, unbindAll 메소드를 사용하여 이벤트를 바인딩할 수 있습니다.

예제

불러온 파일의 형식이 Excel이고, 시트 수가 3개 이상인 경우 시트 수를 표시하도록 FileLoading 이벤트를 설정해 보겠습니다.

또한 파일 가져오기가 완료되면 메시지를 표시할 것입니다.

1. 디자이너 인스턴스를 초기화합니다.

   var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

2. bind 메서드를 이용해 불러온 파일의 형식이 Excel 이고, 시트 수가 3개 이상인 경우 시트 수를 표시하도록 FileLoading 이벤트를 설정합니다.

   designer.bind(GC.Spread.Sheets.Designer.Events.FileLoading, 
     function(type, message){
       if (message.fileType = GC.Spread.Sheets.Designer.FileType.Excel){
         let spreadJsonData = message.data;
         if(spreadJsonData.sheetCount >= 3) {
           window.alert("시트 수: " + spreadJsonData.sheetCount);
         }
       };
     }
   );

   
   

3. bind 메서드를 이용해, 파일 불러오기가 완료된 후 메시지를 표시하도록 FileLoaded 이벤트를 설정합니다.

   designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, function(event,data){
     window.alert("파일 불러오기가 완료되었습니다.");
   });

   아래와 같이 실행되는 것을 확인하실 수 있습니다.

   
   
   

4. FileLoaded 이벤트를 제거하려면, 아래와 같이 unbind 메서드를 사용합니다.

   designer.unbind(GC.Spread.Sheets.Designer.Events.FileLoaded);

5. 모든 이벤트를 제거하려면, 아래와 같이 unbindAll 메서드를 사용합니다.

   designer.unbindAll();