ComboBoxRenderer

입력한 내용으로 목록을 필터링하여 자동완성 형태로 표시할지 지정합니다.

useAsyncHandler=true이고 listFunction을 지정한 비동기 목록에서는 이 속성을 적용하지 않습니다.

관련 데모 보기

autoCompleteMode=true일 때 자동완성 목록에서 항목 하나를 자동으로 선택할지 지정합니다.

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

useAsyncHandler=true이고 listFunction을 지정한 비동기 목록에서는 이 속성을 적용하지 않습니다.

관련 데모 보기

연계된 콤보박스에서 부모 항목의 값이 바뀌면 자손 필드에 적용할 기본값을 지정합니다.

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

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

관련 데모 보기

콤보박스 값이 바뀔 때 영향을 받을 자손 칼럼의 dataField를 지정합니다.

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

관련 데모 보기

목록 항목을 직접 클릭하여 선택한 경우에도 validator를 실행할지 지정합니다.

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

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

관련 데모 보기

현재 칼럼의 값을 콤보박스 목록에 추가하여 표시할지 지정합니다.

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

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

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

관련 데모 보기

모바일 기기 등에 표시할 가상 키보드의 형식을 지정합니다. 실제 키보드의 형태와 지원 여부는 사용하는 기기에 따라 달라집니다.

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

• text : 사용자의 현재 로케일에 맞는 표준 키보드를 제공합니다.
• decimal : 사용자의 로케일에 맞는 숫자형 키보드를 제공합니다. 기기에 따라 음의 부호(-)는 제공할 수도, 제공하지 않을 수도 있습니다.
• numeric : 숫자형 키보드를 제공합니다.
• tel :전화번호 키보드를 제공합니다.
• search : 검색 입력 칸에 최적화한 가상 키보드를 제공합니다.
• email : 이메일 입력에 최적화한 가상 키보드를 제공합니다.
• url : URL 입력에 최적화한 가상 키보드를 제공합니다.
• none : 가상 키보드를 출력하지 않습니다.

관련 데모 보기

목록 항목이 객체인 경우 실제 데이터 값으로 사용할 필드명을 지정합니다. 사용자에게 표시할 텍스트의 필드인 valueField와 구분됩니다.

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

관련 데모 보기

목록 항목에 표시할 텍스트를 동적으로 작성하는 함수를 지정합니다.

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

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

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

• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스
• value : 원래 데이터의 해당 셀 값(value)
• item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)

labelFunction : function(rowIndex, columnIndex, value, item) {
      const valueNumber = Number(value);
      // 1인 경우 남자, 2인 경우 여자
      if(valueNumber === 1)
           return "남";
      else 
           return "여";
}

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

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

관련 데모 보기

선택 목록에 표시할 항목을 배열로 지정합니다. 목록을 동적으로 구성하려면 listFunction을 확인하십시오.

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

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

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

관련 데모 보기

목록 항목의 텍스트 정렬을 지정합니다. "left"는 왼쪽, "center"는 가운데, "right"는 오른쪽 정렬입니다.

관련 데모 보기

현재 행에 사용할 선택 목록을 배열로 반환하는 함수를 지정합니다. list보다 우선합니다.

인자는 행 인덱스(rowIndex), 칼럼 인덱스(columnIndex), 행 데이터(item), 칼럼 필드명(dataField) 및 현재 입력값(value)입니다. 다섯 번째 인자 value는 v3.0.20부터 전달합니다.

v3.0.20부터 useAsyncHandler=true이면 Promise로 목록을 반환할 수 있습니다. keyField와 valueField를 함께 지정한 경우에만 칼럼의 displayField가 필수입니다. 이 조건은 배열을 동기로 반환하는 함수에도 적용됩니다. ["A", "B", "C"] 같은 문자열 목록은 displayField 없이 사용하며, 선택한 값을 dataField에 저장합니다.

비동기 모드에서는 목록 버튼을 누르거나 Enter, Tab 등으로 입력을 확정할 때 조회하며, 목록 레이어에 즉시 로딩 안내를 표시합니다. 응답을 받으면 열린 목록을 갱신하거나 입력 확정을 완료합니다. 입력 중 자동완성은 사용하지 않으며, 목록에서 선택한 항목은 다시 조회하지 않습니다. 현재 입력값에 맞는 목록을 반환하십시오.

Esc, 요청 실패 또는 대상 행과 칼럼의 변경으로 취소된 응답은 적용하지 않습니다.

v3.0.20.1부터 비동기 모드에서 keyField와 valueField를 지정하면, 선택한 항목의 키는 dataField에, 이름은 displayField에 함께 저장합니다. Undo/Redo도 두 값을 한 번에 복원하므로 완료 이벤트에서 표시값을 따로 수정할 필요가 없습니다. 입력한 이름이 목록에 있으면 해당 항목을 저장하고, 없으면 입력값을 두 필드에 저장합니다.

// 그리드 속성: useAsyncHandler: true
// 행 데이터: { assigneeId: "A", assigneeName: "김민수" }
{
    dataField: "assigneeId",
    displayField: "assigneeName",
    editRenderer: {
        type: "ComboBoxRenderer",
        keyField: "id",
        valueField: "name",
        listFunction: async function (rowIndex, columnIndex, item, dataField, value) {
            return await requestUsers(item, value); // [{ id: "B", name: "이서연" }]
        }
    }
}

관련 데모 보기

선택 목록의 최대 높이를 지정합니다.

관련 데모 보기

목록 항목을 표시할 HTML 템플릿을 작성하는 함수를 지정합니다.

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

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

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

• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스
• value : 원래 데이터의 해당 셀 값(value)
• item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
• dataField : 해당 칼럼이 출력하고 있는 행 아이템의 필드명(String)
• listItem : list 속성에서 정의한 배열에서 개별 아이템(Object Or String)

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

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

관련 데모 보기

autoCompleteMode=true일 때 입력 내용이 항목의 시작 부분과 일치해야 하는지 지정합니다. false이면 입력 내용을 포함하는 항목을 표시합니다.

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

관련 데모 보기

사용자가 입력할 수 있는 최대 글자 수를 지정합니다.

관련 데모 보기

셀에 마우스를 올렸을 때 편집 시작 버튼을 표시할지 지정합니다. 버튼을 누르면 편집 상태로 진입합니다.

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

관련 데모 보기

입력한 값을 실제 데이터에 적용하기 전에 유효성을 검사하는 함수를 지정합니다.

파라메터 설명

• 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) {
       let isValid = false;
       const numVal = Number(newValue);
       if(!isNaN(numVal) && numVal > 10000) {
              isValid = true;
        }
        return { "validate" : isValid, "message"  : "10,000 보다 큰 수를 입력하세요." };
 }

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

관련 데모 보기

v3.0.20부터 useAsyncHandler를 true로 설정하면 async 함수 또는 Promise로 검증 결과를 반환할 수 있습니다. { validate: true }이면 완료하고, { validate: false, message, initValue }이면 기존 검증 실패 처리를 따릅니다. 입력기에서는 편집을 유지하며 initValue로 입력값을 복원합니다. Promise가 거부되면 검증 실패 안내를 표시합니다.

대기 중에는 값과 선택을 유지하며 Esc로 취소할 수 있습니다. API로 데이터나 구조 등을 교체한 뒤 도착한 결과는 무시합니다. 붙여넣기는 셀 순서대로 기다리고 validate:false인 셀을 건너뜁니다. 거부된 Promise는 진행 중인 붙여넣기를 중단하며 이미 완료한 셀은 유지합니다. notCheckByClipboard 등 기존 검증 실행 조건은 같습니다.

목록 항목이 객체인 경우 사용자에게 표시할 텍스트의 필드명을 지정합니다. 실제 데이터 값의 필드인 keyField와 구분됩니다.

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

관련 데모 보기