AUISoft
AUIGrid 3.0.14 Documentation
DropDownListRenderer

드랍다운 리스트 렌더러는 여러 항목 중 하나(또는 다수)를 선택할 수 있도록 출력하는 칼럼 / 편집 렌더러입니다.

드랍다운 리스트 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 renderer, editRenderer 속성 값인 Object 형태로 선언되어야 합니다.

칼럼의 editRenderer 와 renderer 속성의 type 모두 설정 가능합니다.

아래는 설정 예제 입니다.
var columnLayout = [ {
     dataField : "name",
     headerText : "Name",
     width : 140
}, {
     dataField : "product",
     headerText : "Product",
     width : 120,
     editRenderer : { // 편집 모드 진입 시 드랍다운리스트 출력하고자 할 때
            type : "DropDownListRenderer",
            list : ["IPhone 5S", "Galaxy S5", "IPad Air", "Galaxy Note3", "LG G3", "Nexus 10"]
      }
}, {
     dataField : "product",
     headerText : "Product",
     width : 120,
     renderer : { // 셀 자체에 드랍다운리스트 출력하고자 할 때
            type : "DropDownListRenderer",
            list : ["IPhone 5S", "Galaxy S5", "IPad Air", "Galaxy Note3", "LG G3", "Nexus 10"]
      }
}];
NameDescription
callLabelFunc
Type : Boolean   Version: 3.0.10.5

renderer 의 type 으로 설정된 드랍다운리스트에서 keyField, valueField 를 설정한 경우 labelFunction 까지 호출되게 할지 여부를 지정합니다.

기본값(default) : false.
delimiter
Type : String

multipleMode 를 true 로 설정한 경우 다중 선택 사이의 구분자를 지정합니다.

기본값은 콤마(", ") 입니다.

기본값(default) : ", ".
descendantDefaultValues
Type : Array

드랍다운리스트를 단계별로 출력하고자 할 때 부모(조상)에 해당되는 드랍다운리스트가 변경되면 기본값으로 바뀔 값들을 지정합니다.

이 속성을 지정하면 부모(조상)에 해당되는 드랍다운리스트 값이 변경되면 지정된 기본값으로 변경됩니다.

지정하지 않을 경우 부모(조상)가 변경되도 해당 값은 그대로 유지됩니다.

기본값(default) : null.
descendants
Type : Array

드랍다운리스트를 단계별로 출력하고자 할 때 영향을 받을 자손 dataField 들을 지정합니다.

예를 들어 "group" 이라는 dataField 로 설정한 칼럼이 드랍다운리스트로 변경이 되면 "subGroup", "subGroup2" 가 영향을 받는 다면 이 값을 [ "subGroup", "subGroup2" ] 로 설정하십시오.

기본값(default) : null.
disabledFunction
Type : Function   Version: 3.0.6

드랍다운리스트를 renderer 의 type 으로 설정한 경우 조건에 따라 비활성화(disabled) 할지 여부를 결정 할 수 있는 함수입니다.

예를 들어 특정 값(name=Anna)은 드랍다운리스트를 비활성화 할 때 유용한 함수입니다.

파라메터 설명

  • rowIndex : (Number) 행 인덱스
  • columnIndex : (Number) 칼럼 인덱스
  • value : (Object) 원본 데이터
  • item : (Object) 행 아이템
  • dataField : (String) 현재 칼럼의 데이터 필드명

Return : (Boolean) true 를 반환하면 드랍다운리스트가 비활성화(disabled) 됩니다.

함수 전체 작성 예는 다음과 같습니다.

disabledFunction :  function(rowIndex, columnIndex, value, item, dataField ) {
       // 행 아이템의 name 이 Anna 라면 드랍다운리스트 비활성화(disabled) 처리
       if(item.name == "Anna") {
              return true;
        }
        return fale;
 }

참고 : editRenderer 의 type 으로 "DropDownListRenderer" 를 설정한 경우 무시됩니다. renderer 의 type 으로 설정한 경우만 유효합니다.

기본값(default) : null.
easyMode
Type : Boolean

easyMode 를 false 로 설정하면 드랍다운리스트의 아이템 선택 후 다른 셀을 클릭 하기 전까지 편집완료 상태가 되지 않습니다.

즉, 선택 후 다시 선택 등과 같은 행위가 필요하다면 이 속성을 false 로 설정하십시오.

기본값(default) : true.
keyField
Type : String

list 속성의 값이 key-value 를 갖는 Object 요소 배열인 경우 key 에 해당되는 필드명을 지정합니다.

실제 적용되는 데이터 값의 필드명입니다.

기본값(default) : null.
labelFunction
Type : Function

드랍다운 리스트에 출력될 리스트의 텍스트를 변경할 수 있는 함수입니다.

기본적으로 list 속성에 정의된 항목이 드랍다운 리스트에 출력되나 이 함수로 출력되는 항목을 바꿀 수 있습니다.

예를 들어 실제 데이터는 1, 2 와 같이 숫자지만 사용자에게 보여 줄때는 "남자", "여자" 로 바꿔 표현해 줘야 할 때가 있습니다.

labelFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

  • rowIndex : 행 인덱스
  • columnIndex : 칼럼 인덱스
  • value : 원래 데이터의 해당 셀 값(value)
  • item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
labelFunction : function(rowIndex, columnIndex, value, item) {
      var valueNumber = Number(value);
      // 1인 경우 남자, 2인 경우 여자
      if(valueNumber == 1)
           return "남";
      else 
           return "여";
}

이 함수의 반환값이 곧 해당 항목의 출력 텍스트가 됩니다.

주의 : listTemplateFunction 과 함께 사용할 수 없습니다. listTemplateFunction 이 우선 순위가 높아 labelFunction 은 무시됩니다.

list
Type : Array

드랍다운 리스트에 출력될 리스트 항목을 지정합니다.

리스트는 배열로 지정합니다. 여기서 지정된 리스트 중 하나를 사용자는 선택할 수 있습니다.

드랍다운 리스트를 사용하기 위해서 반드시 선언되어야 할 속성이지만 listFunction 으로 대체 될 수 있습니다.

만약 listFunction 을 설정한다면 이 속성은 무시됩니다.

기본값(default) : null.
listAlign
Type : String   Version: 3.0.6

리스트 항목들의 텍스트 정렬 방식을 지정합니다. 유효값은 "left", "right", "center" 입니다.

기본값(default) : "center".
listFunction
Type : Function

드랍다운 리스트에 출력될 리스트 항목을 동적으로 변경할 수 있는 함수입니다.

기본적으로 list 속성에 정의된 항목이 드랍다운 리스트에 출력되나 이 함수의 반환값으로 출력되는 항목을 바꿀 수 있습니다.

  • rowIndex : 행 인덱스
  • columnIndex : 칼럼 인덱스
  • item : 해당 행에 출력되고 있는 모든 values (Object)
  • dataField : 해당 셀에 출력되고 있는 데이터필드명
listFunction : function(rowIndex, columnIndex, item, dataField) {
      if(item.group == 1) // 상위 단계(부모)의 값이 1이라면....
           return myGroupLevel1; // myGroupLevel1 은 미리 정의된 배열임
      else if(item.group == 2)  // 상위 단계(부모)의 값이 2라면....
           return myGroupLevel2; // myGroupLevel1 은 미리 정의된 배열임
      return ["1", "2", "3"]; // 기본 리스트
}

이 함수의 반환값이 곧 해당 항목의 출력 리스트가 됩니다.(반드시 Array를 반환하십시오.)

listHeight
Type : Number   Version: 3.0.6

드랍다운 항목 리스트의 높이를 명시적으로 지정합니다. 이 값으로 설정한 값보다 항목 리스트의 높이는 커지지 않습니다.

기본값(default) : NaN.
listTemplateFunction
Type : Function

드랍다운 리스트에 출력될 리스트의 텍스트를 사용자 정의 할 수 있는 함수입니다.

기본적으로 list 속성에 정의된 항목이 드랍다운 리스트에 출력되나 이 함수로 출력되는 항목의 HTML 템플릿을 바꿀 수 있습니다.

리스트의 출력 모습을 복잡하거나, 다양한 정보를 출력시키고자 할 때 사용하십시오.

listTemplateFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

  • rowIndex : 행 인덱스
  • columnIndex : 칼럼 인덱스
  • value : 원래 데이터의 해당 셀 값(value)
  • item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
  • dataField : 해당 칼럼이 출력하고 있는 행 아이템의 필드명(String)
  • listItem : list 속성에서 정의한 배열에서 개별 아이템(Object Or String)
listTemplateFunction : function(rowIndex, columnIndex, value, item, dataField, listItem) { return '<img src="./assets/' + listItem.img + '" height="20" width="20"/><span>' + value + '</span>'; }

이 함수의 반환값이 곧 해당 항목의 출력 HTML 이 됩니다.(innerHTML 처리됨)

주의 : labelFunction 과 함께 사용할 수 없습니다. listTemplateFunction 이 우선 순위가 높아 labelFunction 은 무시됩니다.

multipleMode
Type : Boolean

드랍다운 리스트에서 다중 선택을 할지 여부를 지정합니다. multipleMode 를 true 설정하면 여러 항목을 선택 적용할 수 있습니다.

기본값(default) : false.
showCheckAll
Type : Boolean   Version: 3.0.6

다중 선택을 사용하는 경우(multipleMode=true) 전체 선택/해제 할 수 있는 버턴을 상단에 추가할지 여부를 지정합니다.

기본값(default) : false.
showEditorBtn
Type : Boolean   Version: 3.0.4

셀이 선택된 상태에서 해당 셀의 오른쪽에 에디터 버턴을 출력할지 여부를 지정합니다.

에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.

기본값(default) : true.
showEditorBtnOver
Type : Boolean

셀에 마우스 오버 시 해당 셀의 오른쪽에 에디터 버턴을 출력시킬지 여부를 지정합니다.

에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.

기본값(default) : false.
valueField
Type : String

list 속성의 값이 key-value 를 갖는 Object 요소 배열인 경우 value 에 해당되는 필드명을 지정합니다.

드랍다운리스트에 출력되는 데이터의 필드명입니다.

기본값(default) : null.