기본 편집기
리얼그리드는 라인, 멀티라인, 드롭다운, 날짜, 검색 등의 다양한 형태의 편집기를 제공 하고 있습니다.
라인 편집기
라인 편집기는 한 줄 텍스트를 입력할 수 있는 기본 에디터입니다.
var textCase = $(':radio[name="rbTextCase"]:checked').val();
gridView.setColumnProperty("OrderID", "editor", { textCase: textCase });
멀티라인 편집기
멀티라인 편집기는 라인 구분자로 나누어지는 여러 줄의 텍스트를 입력할 수 있습니다. 입력되는 텍스트에 맞춰 편집기의 크기가 조정됩니다. Ctrl+Enter로 줄 나누기를 할 수 있습니다.
altEnterNewLine속성을 true로 설정하면 alt+enter키 입력시 줄바꿈을 합니다.
gridView.setColumnProperty("CompanyName","editor", {
"type": "multiline",
"textCase": "upper",
altEnterNewLine:true
})
줄바꿈을 사용할 컬럼에 white-space css스타일을 적용해야 \n 사용 시 줄바꿈이 되어 표시됩니다.
// *.css
.multiline-editor{
white-space: pre;
}
자동 줄바꿈 설정은 줄바꿈을 사용할 컬럼에 white-space css스타일을 pre-line로 설정해야 합니다.
영문자의 경우에는 단어를 잘라서 줄바꿈 처리할 수 없으며 공백, 띄어쓰기 단위로만 줄바꿈이 되어집니다.
// *.css
.multiline-editor{
white-space: pre-line;
}
...
//컬럼설정
{
"name": "CompanyName",
"fieldName": "CompanyName",
"width": "200",
"editor": {
"type": "multiline",
"textCase": "upper"
},
"styleName": "multiline-editor",
"header": {
"text": "Multiline Edit",
"styleName": "orange-column multiline-editor"
}
},
...
숫자 편집기
숫자 편집기는 숫자를 입력할 수 있는 편집기 입니다.
천단위 구분기호를 표시하고 싶은 경우 numberFormat을 "#,##0" 로 설정하면 되고, 고정 소수점 사용시에는 필요한 자릿수만큼 소수점 이후에 "0"을 표시, 가변 소수점 사용시에는 "#"을 사용합니다.
예를 들어 천단위 구분기호를 사용하고 고정 소수점 3자리를 사용할 경우 "#,##0.000" 를 사용하면 됩니다.
editor.editFormat을 "#,##0.##"로 지정한 경우 소수점이하 자리는 최대 2자릿수만큼만 입력됩니다.
...
//컬럼설정
{
"name": "Quantity",
"fieldName": "Quantity",
"width": "100",
"sortable": false,
"editor": {
"type": "number",
"textAlignment": "far",
"editFormat": "#,##0.##",
"multipleChar": "+",
},
"numberFormat": "#,##0.##",
"header": {
"text": "Number Edit"
}
}
...
일부 국가에서는 천단위 구분기호 ','와 소수점 '.'을 반대로 사용하는 경우가 있습니다.(천단위 구분기호 '.', 소수점 ',')
이 경우 format 문자열을 ; 으로 구분하여 첫번째는 숫자를 표현하는 형식을 두번째는 소숫점 기호를 세번째는 천단위 구분기호를 지정합니다.
numberFormat: "#,##0.##;,;." //12345.67 인 경우 12.345,56 으로 표시
입력시 에디터에도 같은 포맷을 가지려면 동일하게 지정하면 됩니다.
editFormat: "#,##0.##;,;." //12345.67 인 경우 12.345,56 으로 표시
var column = [
...
{
"name": "Quantity",
"fieldName": "Quantity",
"width": "100",
"sortable": false,
"editor": {
"type": "number",
"textAlignment": "far",
"editFormat": "#,##0.##;,;.",
"multipleChar": "+",
},
"header": {
"text": "Number Edit"
}
}
...
];
드롭다운 편집기
드롭다운 편집기 는 values속성으로 지정된 목록 중 한 값을 선택합니다. 또한, labels에 values 대신 드롭다운 리스트에 표시될 텍스트들을 지정할 수 있습니다.labels의 항목 수가 values 항목 수 이상이어야 하고, 에디터에 values를 지정하지 않으면 컬럼에 지정된 values, labels 목록이나 lookupSource의 목록을 대신 사용합니다.
...
//컬럼설정
{
"name": "CustomerID",
"fieldName": "CustomerID",
"width": "150",
"sortable": false,
"lookupDisplay": true, //라벨로 표시
"values": ["VINET", "HANAR", "SUPRD", "VICTE", "THREE", "SEVEN"],
"labels": ["<VINET>", "<HANAR>", "<SUPRD>", "<VICTE>", "<THREE>", "<SEVEN>"],
"editor": {
"type": "dropdown",
"dropDownCount": 4
},
"header": {
"text": "DropDown Edit"
}
}
...
domainOnly가 true이면 목록에 있는 값들만 선택할 수 있습니다.textReadOnly가 true이면 키 입력이 안되며 선택만 할 수 있습니다.
...
//컬럼설정
{
"name": "CustomerID2",
"fieldName": "CustomerID",
"width": "150",
"sortable": false,
"lookupDisplay": true,
"values": ["VINET", "HANAR", "SUPRD", "VICTE", "THREE", "SEVEN"],
"labels": ["<VINET>", "<HANAR>", "<SUPRD>", "<VICTE>", "<THREE>", "<SEVEN>"],
"editor": {
"type": "dropdown",
"dropDownCount": 4,
"domainOnly": true,
"textReadOnly": true
},
"header": {
"text": "Domain Only"
}
}
...
검색 편집기
검색 편집기는 설정된 값 중에 일치되는 값이 드롭다운 목록에 표시되는 에디터 이다. 검색이 시작되면 gridView.onEditSearch() 이벤트가 발생하며, 이 이벤트 내에서 검색 처리 후 gridView.fillEditSearchItems()을 실행해 드롭다운 목록을 채워준다.
...
var CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];
gridView.onEditSearch = function (grid, index, text) {
console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
var items = CustomerNames.filter(function (str) {
return str.indexOf(text) == 0;
});
console.log(items);
grid.fillEditSearchItems(index.column, text, items);
};
...
//컬럼설정
{
"name": "CustomerID3",
"fieldName": "CustomerID",
"width": "150",
"sortable": false,
"editor": {
"type": "search",
"searchLength": 1,
"searchDelay": 1000,
"useCtrlEnterKey": true,
"useEnterKey": true
},
"header": {
"text": "Search Editor"
}
}
...
날짜 편집기
날짜 편집기를 사용하면 키보드로 날짜를 입력하거나 달력 팝업을 사용하여 날짜를 선택할 수 있습니다.
필드의 dataType = 'datetime' 으로 설정시 그리드는 해딩 데이터를 date객체로 관리하게 됩니다.
그리드에 저장된 값 반환시 'Wed Jul 03 1996 00:00:00 GMT+0900 (대한민국 표준시)' 이렇게 표현되어 사용하기 불편하고 입력된 텍스트 형태 그대로 사용하고 싶다면 아래 팁 링크를 참고하세요
...
//컬럼설정
{
"name": "OrderDate",
"fieldName": "OrderDate",
"width": "180",
"sortable": false,
"editor": {
"type": "date",
"datetimeFormat": "yyyy.MM.dd"
"mask": {
"editMask": "9999/99/99",
"placeHolder":"yyyy/MM/dd",
"includedFormat": true
}
},
"header": {
"text": "Date Edit"
}
}
...
minDate, maxDate를 지정하여 특정기간만 선택할 수 있습니다.
gridView.setColumnProperty("OrderDate", "editor", {
type: "date",
datetimeFormat: "yyyy.MM.dd",
minDate: new Date("1996-06-1"),
maxDate: new Date("1996-08-30")
});
holidays속성으로 특정 날짜에 스타일과 툴팁을 지정할 수 있습니다.
gridView.setEditorOptions({
viewGridInside: true,
holidays: [ {
type : "day", // 요일을 지정합니다.
days : [0,6], // 일요일,토요일
tooltips : ["일요일","토요일"], // tooltip
enabled : true // false인경우 선택할수 없습니다.
}, {
type : "date", // 기념일 또는 특정일자를 지정합니다.
dates : ["01-01","03-01","05-05","08-15"], // 기념일.
tooltips : ["신정","삼일절","어린이날","광복절"],
styleName : "holidays"
}]
});