AUISoft
AUIGantt 3.6 Documentation
ComboBoxRenderer

콤보박스 렌더러는 특정 칼럼의 셀에 여러 항목 중 하나를 선택할 수 있도록 출력하는 칼럼 렌더러입니다.

콤보박스와 드랍다운리스트의 차이점은 드랍다운리스트는 출력된 리스트 중 하나를 선택하는 반면 콤보박스는 출력된 리스트 중 하나를 선택하거나 직접 사용자가 다른 값을 입력 할 수 있습니다.

콤보박스 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 editRenderer 속성 값인 Object 형태로 선언되어야 합니다.

칼럼의 editRenderer 속성의 type 으로만 설정 가능합니다.

아래는 설정 예제 입니다.
myColumnLayout.push({
     dataField : "product",
     headerText : "Product",
     width : 120,
     editRenderer : { // 편집 모드 진입 시 콤보박스리스트 출력하고자 할 때
            type : "ComboBoxRenderer",
            list : ["IPhone 5S", "Galaxy S5", "IPad Air", "Galaxy Note3", "LG G3", "Nexus 10"],
            historyMode : true // 히스토리 모드 사용
      }
});
NameDescription
autoCompleteMode
Type : Boolean

콤보 박스에서 사용자가 입력한 내용을 기반으로 필터링하여 자동완성 형으로 리스트를 출력시킬지 여부를 지정합니다.

기본값(default) : false.
autoEasyMode
Type : Boolean

콤보 박스에서 자동완성 사용하는 경우(autoCompleteMode=true) 사용자가 입력한 내용을 기반으로 나온 리스트 중 기본 1개를 자동 선택하도록 할지 여부를 지정합니다.

autoEasyMode=true 설정하면 아래 화살표 없이 바로 엔터키, 탭키 등으로 완료를 해도 리스트 중 1개를 선택합니다.

기본값(default) : false.
descendantDefaultValues
Type : Array

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

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

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

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

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

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

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

현재 칼럼의 모든 값을 콤보 박스 리스트로 추가하여 표시할지 여부를 지정합니다.

예를 들어 현재 칼럼에 출력되는 값이 "A", "B", "C" 인 경우 4번째 행의 같은 칼럼에 "D" 를 사용자가 입력하면, 콤보박스 리스트에는 "D" 가 추가되어 ["A", "B", "C", "D"] 가 리스트로 출력됩니다.

historyMode 는 list 속성(또는 listFunction) 과 함께 사용이 가능합니다. 즉, 기본적으로 list 에서 정의한 리스트에 사용자가 입력한 값이 추가로 리스트로 출력됩니다.

단, list 속성을 정의하고, list 의 값이 key-value 를 갖는 Object 요소 배열인 경우에는 historyMode 가 무시됩니다.(keyField, valueField 사용할 때 무시됨)

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

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

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

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

콤보박스 리스트에 출력될 리스트의 텍스트를 변경할 수 있는 함수입니다.

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

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

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.
listFunction
Type : Function

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

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

  • rowIndex : 행 인덱스
  • columnIndex : 칼럼 인덱스
  • item : 해당 행에 출력되고 있는 행 아이템 객체 (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를 반환하십시오.)

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 은 무시됩니다.

maxlength
Type : Number

사용자가 입력 할 수 있는 글자수를 제한하도록 지시합니다.

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

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

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

기본값(default) : false.
validator
Type : Function

사용자가 입력을 완료하고 실제로 적용하기 전에 유효성 검사를 할 수 있는 함수입니다.

파라메터 설명

  • oldValue : (String) 수정 전 값
  • newValue : (String) 사용자가 수정 한 값. 즉, 이 값이 유효한지 검사해야 함
  • item : (Object) 해당 행에 출력되고 있는 행 아이템 객체
  • dataField : (String) 해당 칼럼의 데이터필드명
  • fromClipboard : (Boolean) 클립보드(붙여넣기)로 셀 수정한지 여부

함수의 리턴값은 Object 이며 해당 Object 는 validate 와 message 를 작성해 주십시오.

예를 들면 사용자가 입력한 newValue 가 유효하지 않다면 다음과 같이 return 값을 설정하십시오.

return  { "validate" : false, "message"  : "10,000 보다 큰 수를 입력하세요." }; 

validate 가 false 인 경우 message 로 설정한 메세지가 사용자에게 출력됩니다.

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

 validator : function(oldValue, newValue, item, dataField, fromClipboard) {
       var isValid = false;
       var numVal = Number(newValue);
       if(!isNaN(numVal) && numVal > 10000) {
              isValid = true;
        }
        return { "validate" : isValid, "message"  : "10,000 보다 큰 수를 입력하세요." };
 }
 

참고 : 클립보드(붙여넣기)인 경우, 유효성 검사 실패 할 때 메세지 출력은 생략됩니다.

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

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

콤보박스리스트에 출력되는 데이터의 필드명입니다.

기본값(default) : null.