AUISoft
AUIGrid 3.0.14 Documentation
ComboBoxRenderer

콤보박스 렌더러는 여러 항목 중 하나를 선택하거나 직접 사용자가 값을 입력 할 수 있도록 출력하는 편집 렌더러입니다.

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

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

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

아래는 설정 예제 입니다.
var columnLayout = [ {
     dataField : "name",
     headerText : "Name",
     width : 140
}, {
     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.
doValidatorFromItemClick
Type : Boolean   Version: 3.0.11.17

유효성 검사 함수(validator)를 설정한 경우 콤보박스 리스트 항목(item)을 직접 클릭하여 선택했을 때도 유효성 검사를 실시 할지 여부를 지정합니다.

기본적으로 콤보박스의 리스트 항목을 직접 클릭하여 선택한 경우 온전히 유요한 값이기 때문에 유효성 검사 함수(validator) 를 실행 시키지 않습니다.

그러나 이 속성을 설정하면 리스트 항목 중 하나를 직접적으로 클릭하여 선택한다해도 유효성 검사 함수(validator)를 실행 시킵니다.

기본값(default) : false.
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.
inputMode
Type : String   Version: 3.0.11

가상 키보드를 제공하는 디바이스(일반적으로 안드로이드, iOS 와 같은 모바일 디바이스)에서 출력 시킬 가상 키보드(소프트 키보드)의 형식을 지정합니다.

가상 키보드는 전적으로 해당 디바이스에서 제공하는 형태 그래도 출력 시킵니다. 즉, 기기에서 지원해야 사용 가능합니다.

기기마다 표시되는 가상 키보드는 상이 할 수 있습니다. 전적으로 기기에 의존하는 키보드입니다.

유효값은 다음과 같습니다.

  • text : 사용자의 현재 로케일에 맞는 표준 키보드를 제공합니다.
  • decimal : 사용자의 로케일에 맞는 숫자형 키보드를 제공합니다. 기기에 따라 음의 부호(-)는 제공할 수도, 제공하지 않을 수도 있습니다.
  • numeric : 숫자형 키보드를 제공합니다.
  • tel :전화번호 키보드를 제공합니다.
  • search : 검색 입력 칸에 최적화한 가상 키보드를 제공합니다.
  • email : 이메일 입력에 최적화한 가상 키보드를 제공합니다.
  • url : URL 입력에 최적화한 가상 키보드를 제공합니다.
  • none : 가상 키보드를 출력하지 않습니다.
기본값(default) : "text".
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 : 해당 행에 출력되고 있는 행 아이템 객체 (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 은 무시됩니다.

matchFromFirst
Type : Boolean   Version: 3.0.7.11

콤보 박스에서 자동완성 사용하는 경우(autoCompleteMode=true) 사용자가 입력한 내용을 처음부터 일치시켜서 리스트로 출력할지 여부를 나타냅니다.

즉, matchFromFirst=false 설정 시 입력한 내용이 단순 포함되면 리스트로 출력시킵니다.

기본값(default) : true.
maxlength
Type : Number

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

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

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

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

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

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

파라메터 설명

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

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

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

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

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

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

validator : function(oldValue, newValue, item, dataField, fromClipboard, which) {
       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.