드랍다운 리스트 렌더러는 여러 항목 중 하나(또는 다수)를 선택할 수 있도록 출력하는 칼럼 / 편집 렌더러입니다.
드랍다운 리스트 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 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"] } }];
Name | Description |
---|---|
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)은 드랍다운리스트를 비활성화 할 때 유용한 함수입니다. 파라메터 설명
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 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.
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 속성에 정의된 항목이 드랍다운 리스트에 출력되나 이 함수의 반환값으로 출력되는 항목을 바꿀 수 있습니다.
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 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.
이 함수의 반환값이 곧 해당 항목의 출력 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 . |