입력 편집 렌더러(InputEditRenderer)는 editable = true 인 경우 기본(defalut) 편집 렌더러입니다.(input[type="text"])
이 렌더러는 사용자가 수정한 값의 유효성 검사(validating) 을 할 수 있으며, 숫자만 입력 가능토록 설정이 가능합니다.
입력 편집 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 editRenderer 속성 값인 Object 형태로 선언되어야 합니다.
칼럼의 editRenderer 속성의 type 으로만 설정 가능합니다.
아래는 설정 예제 입니다.
myColumnLayout.push({
dataField : "price",
headerText : "Price",
width : 80,
dataType : "numeric"
editRenderer : {
type : "InputEditRenderer",
onlyNumeric : true, // 0~9 까지만 허용
allowPoint : true // onlyNumeric 인 경우 소수점(.) 도 허용
}
});
| Name | Description |
|---|---|
|
allowNegative
| Type : Boolean 숫자만 입력 설정(onlyNumeric=true) 인 경우, 음수 부호 입력(-) 도 허용할지 여부를 지정합니다. 기본값(default) :false. |
|
allowPoint
| Type : Boolean 숫자만 입력 설정(onlyNumeric=true) 인 경우, 소수점 입력(.) 도 허용할지 여부를 지정합니다. 기본값(default) :false. |
|
autoThousandSeparator
| Type : Boolean 숫자만 입력 설정(onlyNumeric=true) 인 경우, 인푸터에 자동 컴마를 천단위 출력할지 여부를 지정합니다. 기본값(default) :false. |
|
maxlength
| Type : Number 사용자가 입력 할 수 있는 글자수를 제한하도록 지시합니다. 기본값(default) :10000. |
|
onlyNumeric
| Type : Boolean 입력 시 사용자가 숫자 0~9 만 반응하도록 지정합니다. onlyNumeric 을 true 설정하면 사용자는 숫자 외에 다른 문자는 입력할 수 없습니다. 기본값(default) :false. |
|
textAlign
| Type : String 편집 렌더러 즉, 인푸터(inputer)에서 입력 텍스트의 정렬을 지정합니다. 유효값은 "left", "right", "center" 입니다. 기본값(default) :"left". |
|
validator
| Type : Function 사용자가 입력을 완료하고 실제로 적용하기 전에 유효성 검사를 할 수 있는 함수입니다. 파라메터 설명
함수의 리턴값은 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. |