마스크 편집 렌더러(MaskEditRenderer)는 정의된 패턴으로 강제 시켜 입력받도록 하는 편집 렌더러입니다.
마스크 편집 렌더러를 사용하기 위해서는 mask 속성을 반드시 설정해야 합니다.
이 편집 렌더러는 사용자가 수정한 값의 유효성 검사(validator) 을 할 수 있습니다.
클립보드의 값을 마스크 설정된 칼럼에 붙여 넣기 할 때 설정된 mask 규칙에 어긋나면 붙여 넣기 되지 않습니다.
마스크 편집 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 editRenderer 속성 값인 Object 형태로 선언되어야 합니다.
칼럼의 editRenderer 속성의 type 으로만 설정 가능합니다.
아래는 설정 예제 입니다.var columnLayout = [ { dataField : "name", headerText : "Name", width : 140 }, { dataField : "datetime", headerText : "DateTime", width : 80, editRenderer : { type : "MaskEditRenderer", mask : "9999-99-99 99:99:99", placeholder : "yyyy-mm-dd hh:mm:dd", applyMaskValue : true } }];
Name | Description |
---|---|
applyMaskValue
| Type : Boolean Version: 3.0.11 수정 적용 시 실제 데이터 모델에 적용 시킬 값이 마스크값 그대로 적용 할지 여부를 지정합니다. 예를 들어 mask를 "9999-99-99" 로 설정한 경우 순수하게 사용자가 입력한 값이 "12345678" 이라 했을 때 다음처럼 데이터 모델에 적용됩니다.
true . |
autoEnter
| Type : Boolean Version: 3.0.11 마스크로 설정된 유효한 자릿수만큼 모두 입력하여 끝까지 간 경우 엔터(Enter)로 입력 완료된 것으로 간주 시킬지 여부를 지정합니다. autoEnter 를 true 로 설정하면 엔터 키와 같은 입력 완료 키를 따로 누르지 않아도 입력이 완료 됩니다. 기본값(default) :false . |
inputMode
| Type : String Version: 3.0.11 가상 키보드를 제공하는 디바이스(일반적으로 안드로이드, iOS 와 같은 모바일 디바이스)에서 출력 시킬 가상 키보드(소프트 키보드)의 형식을 지정합니다. 가상 키보드는 전적으로 해당 디바이스에서 제공하는 형태 그래도 출력 시킵니다. 즉, 기기에서 지원해야 사용 가능합니다. 기기마다 표시되는 가상 키보드는 상이 할 수 있습니다. 전적으로 기기에 의존하는 키보드입니다. 유효값은 다음과 같습니다.
"text" . |
mask
| Type : String Version: 3.0.11 입력을 강제 시킬 마스크(mask)를 설정합니다. 마스크는 미리 정해진 자릿수와 해당 자리에 입력 가능한 패턴을 의미합니다. 마스크 설정의 입력 유효 패턴은 다음과 같습니다.
마스크 편집 렌더러를 사용하기 위해서는 mask 속성을 반드시 설정해야 합니다. 예로 시간과 같이 숫자 6자리만 입력 가능한 마스크 설정은 "99:99:99" 입니다. 기본값(default) :null . |
overWrite
| Type : Boolean Version: 3.0.11 마스크 자리 입력 시 덮어쓰기로 값이 치환될지 여부를 지정합니다. overWrite = false 라면 새로운 값을 입력할 때 현재 값이 뒤로 밀리게 됩니다. 기본값(default) :true . |
placeholder
| Type : String Version: 3.0.11 아직 입력되지 않은 마스크 입력 자리에 표시될 placeholder 를 지정합니다. 예로 mask 를 "9999-99-99" 로 설정한 경우 사용자에게 날짜 입력을 표시해 주기 위해 placeholder 를 "yyyy-mm-dd" 로 설정할 수 있습니다. 설정한 mask 와 placeholder 의 자릿수는 같아야 합니다. placeholder 를 설정하지 않으면 기본값인 "____-__-__" 로 출력됩니다. 기본값(default) :"_" . |
textAlign
| Type : String Version: 3.0.11 편집 렌더러 즉, 인푸터(inputer)에서 입력 텍스트의 정렬을 지정합니다. 유효값은 "left", "right", "center" 입니다. 기본값(default) :"left" . |
validator
| Type : Function Version: 3.0.11 사용자가 입력을 완료하고 실제로 적용하기 전에 유효성 검사를 할 수 있는 함수입니다. 파라메터 설명
함수의 리턴값은 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 . |