SMART datagrid v1.4 > Examples

[ grids ver.1.3.4]   Back  Forward

Date Cell Editor  Example

DataColumn.editor 설정시 type"date"로 지정하면, 자료형DATETIME데이터필드의 값을 편집할 때, DateCellEditor를 사용할 수 있다. 

아래 그리드에서 "최초상환일"과 "최종상환일" 컬럼이 date 편집기로 설정되었다. 텍스트 입력을 시작하거나, alt+down 키를 누르거나, 데이터셀 오른쪽에 표시되는 버튼을 클릭하면 달력이 표시된다. 이 때 down 키를 누르면 입력 포커스가 달력으로 이동하고 달력 배경색이 변경된다. 키보드로 날짜를 정하고 enter 키를 누르면 선택된 날짜 값이 데이터셀에 전달된다. 

달력에 포커스가 있을 때 page-up 키를 누르면 이전 달로, page-down이면 다음 달로 이동하고, alt+page-up이면 이전 년도로, alt+page-donw이면 다음 해로 이동한다. 그리고, shift+up 키를 누르면 다시 텍스트 박스로 포커스가 이동한다. 또는, alt+up 키를 눌러서 달력 상자를 완전히 닫을 수 있다. 

아래 설정 변경들로 "최초상환일" 컬럼의 편집기를 테스트한다. 

"Today" 버튼이 표시되도록 한다. 

년도 이동 버튼이 표시되도록 한다. 

텍스트 입력을 못하도록 한다. 

DateCellEditor.minDate, maxDate를 지정해서 달력에서 선택할 수 있는 날짜의 범위를 지정할 수 있다. "최종 상환일2"의 범위를 "1965-01-01", "1975-12-31" 사이로 지정했다. 

Grid - 1
rows

DataColumn.editorButtonVisibility 속성을 설정해서 셀 편집기 버튼 표시 여부를 지정할 수 있다. 

 "최초상환일" 컬럼의 편집기 버튼 표시 여부 지정. 

 "최초상환일" 컬럼의 값을 지우면 달력상자에 현재날짜로 표시된다. 

DateCellEditor.holiDays 속성을 지정해서 달력에서 사용자가 특정 날짜를 선택하지 못하도록 할 수 있다. 아래 그리드에서 최초상환일은 DayHolidayDateHoliday를 이용하여 매주 일요일, 그리고 2016년 5월 5일과 2016년 5월 14일은 선택하지 못하도록 지정했으며, 최종상환일은 RangeHolidayBaseHoliday를 이용하여 2000년 1월 1일 이전과 2016년 12월 31일 이후, 그리고 2016년 9월 15일로부터 앞뒤 하루씩은 선택하지 못하도록 했다. 

Grid - 2
rows

(mask 속성은 1.4.3 버전 이상부터 사용가능) 

DateCellEditor가 1.4.3 이상 버전부터 MaskCellEditor를 상속 받아 구현 되면서 

mask속성을 이용하여 editor에서 마스크 편집이 가능해졌다. 

mask의 기능을 사용하기 위해서는 반드시 mask와 datetimeFormat의 포맷형식을 일치 시켜야 하며 includeSeparators을 false로 지정해야 한다. 

소스보기 JSP 

See Also
DateCellEditor
DataField
DataColumn.editor
EditOptions
GridBase.editOptions
MaskCellEditor
Examples
Text Cell Editors
List Cell Editors
Number Cell Editor
셀 편집