MultiComboBox 에 트리 구조 데이터의 동적 바인딩 지원

page no.  97634239

개요

MultiComboBox 컨트롤은 기존에도 TreeViewList 유형을 제공하였으나, SetDataSet() API 를 통해 동적으로 계층형 데이터를 설정하는 방식은 지원하지 않았습니다.
이번 개선을 통해, SetDataSet() 으로 계층 구조 데이터를 동적으로 바인딩할 수 있도록 개선하였습니다.

1. 기능 설명
   1. TreeViewList 유형에서 SetDataSet() API 를 통한 동적 데이터 구성 지원
2. 사용 방법
   1. MultiComboBox 의 ViewType 을 TreeViewList 로 설정합니다.
      
      
      

   2. MultiComboBox 의 ParentField, ChildField, ValueField, LabelField 속성을 지정하고, SetDataSet() 을 이용하여 동적으로 데이터를 바인딩합니다.

      예제 코드

      /**
       * MultiComboBox 컨트롤에 사용할 필드 속성을 지정하고,
       * 기존에 설정된 데이터를 초기화합니다.
       * 
       * @returns {MultiComboBox} MultiComboBox 객체
       */
      var setupMultiComboBox = function() {
          var combo = Matrix.getObject('MultiComboBox');
          combo.ClearDataSet();
      
          combo.CaptionField = 'CODE';    // 필수 입력
          combo.ValueField = 'CODE';      // 필수 입력
          combo.ParentField = 'P_CODE';   // 필수 입력
          combo.ChildField = 'CODE';      // 필수 입력
          combo.ImageField = 'IMG';       // 선택 사항 (이미지 경로 : reports/WEB_IMAGES/ )
          combo.TooltipField = 'CODE';    // 선택 사항
          
          return combo;
      }
      
      /**
       * MultiComboBox 의 트리 구조 바인딩을 위해
       * 계층형 구조를 가진 데이터셋을 동적으로 생성합니다.
       * 
       * 부모와 자식의 코드가 동일한 경우 해당 항목은 루트 노드로 간주됩니다.
       * 
       * @returns {DataSet} 생성된 계층형 데이터셋 객체
       */
      var createHierarchyDataSet = function() {
          var columns = ['P_CODE', 'CODE', 'IMG'];
          var rows = [
              ['과일', '과일', 'fruit.png'],	// ROOT
              ['과일', '빨간색', 'fruit.png'],
              ['과일', '노란색', 'fruit.png'],
              ['빨간색', '사과', 'apple.png'],
              ['빨간색', '딸기', 'strawberry.png'],
              ['빨간색', '체리', 'cherries.png'],
              ['노란색', '바나나', 'bananas.png'],
              ['노란색', '망고', 'mango.png'],
              ['노란색', '망고', 'mango.png']
          ];
      
          return Matrix.CreateDataSet('T1', columns, rows);
      }
      
      /* 문서 로드 된 후 AutoRefresh 수행 전에 발생합니다 */
      Matrix.OnDocumentLoadComplete = function() {
          var combo = setupMultiComboBox();
          var dataSet = createHierarchyDataSet();
          combo.SetDataSet(dataSet);
      }

      ✅ 예제 코드 실행 결과