기본 편집기
리얼그리드는 라인, 멀티라인, 드롭다운, 날짜, 검색 등의 다양한 형태의 편집기를 제공 하고 있습니다.
라인 편집기는 한 줄 텍스트를 입력할 수 있는 기본 에디터입니다.
normal upper lower
1
2
var textCase = $(':radio[name="rbTextCase"]:checked').val()
gridView.setColumnProperty("OrderID", "editor", {"textCase": textCase});
멀티라인 편집기는 라인 구분자로 나누어지는 여러 줄의 텍스트를 입력할 수 있습니다. 입력되는 텍스트에 맞춰 편집기의 크기가 조정됩니다. Ctrl+Enter로 줄 나누기를 할 수 있습니다.
styles의 textWrap 속성을 반드시 지정해주어야 하며 explicit
인 경우 문자열 내에 명시적으로 행바꿈(\n) 코드가 있을 경우 행바꿈이 이루어지고 normal
인 경우 문자열이 컬럼의 폭보다 긴 경우 자동으로 줄 행바꿈이 이루어 집니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
//컬럼설정
{
"name": "CompanyName",
"fieldName": "CompanyName",
"width": "200",
"editor": {
"type": "multiline",
"textCase": "upper"
},
"styles": {
"textAlignment": "near",
"textWrap": "normal" //"normal" or "explicit"
},
"header": {
"text": "Multiline Edit",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
altEnterNewLine속성을 true로 설정하면 alt+enter키 입력시 줄바꿈을 합니다.
1
2
3
4
5
gridView.setColumnProperty("CompanyName","editor", {
"type": "multiline",
"textCase": "upper",
altEnterNewLine:true
})
숫자 편집기는 숫자를 입력할 수 있는 편집기 입니다.
천단위 구분기호를 표시하고 싶은 경우 styles.numberFormat을 “#,##0” 로 설정하면 되고, 고정 소수점 사용시에는 필요한 자릿수만큼 소수점 이후에 “0”을 표시, 가변 소수점 사용시에는 “#”을 사용합니다.
예를 들어 천단위 구분기호를 사용하고 고정 소수점 3자리를 사용할 경우 “#,##0.000” 를 사용하면 됩니다.
editor.editFormat을 “#,##0.##”로 지정한 경우 소수점이하 자리는 최대 2자릿수만큼만 입력됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...
//컬럼설정
{
"name": "Quantity",
"fieldName": "Quantity",
"width": "100",
"sortable": false,
"editor": {
"type": "number",
"textAlignment": "far",
"editFormat": "#,##0.##",
"multipleChar": "+",
},
"styles": {
"textAlignment": "far",
"numberFormat": "#,##0.##"
},
"header": {
"text": "Number Edit",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
일부 국가에서는 천단위 구분기호 ‘,’와 소수점 ‘.’을 반대로 사용하는 경우가 있습니다.(천단위 구분기호 ‘.’, 소수점 ‘,’)
이 경우 format 문자열을 ; 으로 구분하여 첫번째는 숫자를 표현하는 형식을 두번째는 소숫점 기호를 세번째는 천단위 구분기호를 지정합니다.
1
numberFormat: "#,##0.##;,;." //12345.67 인 경우 12.345,56 으로 표시
입력시 에디터에도 같은 포맷을 가지려면 동일하게 지정하면 됩니다.
1
editFormat: "#,##0.##;,;." //12345.67 인 경우 12.345,56 으로 표시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var column = [
...
{
"name": "Quantity",
"fieldName": "Quantity",
"width": "100",
"sortable": false,
"editor": {
"type": "number",
"textAlignment": "far",
"editFormat": "#,##0.##;,;.",
"multipleChar": "+",
},
"styles": {
"textAlignment": "far",
"numberFormat": "#,##0.##;,;."
},
"header": {
"text": "Number Edit",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
];
드롭다운 편집기 는 values
속성으로 지정된 목록 중 한 값을 선택합니다. 또한, labels
에 values
대신 드롭다운 리스트에 표시될 텍스트들을 지정할 수 있습니다.
labels
의 항목 수가 values 항목 수 이상이어야 하고, 에디터에 values
를 지정하지 않으면 컬럼에 지정된 values
, labels
목록이나 lookupSource
의 목록을 대신 사용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...
//컬럼설정
{
"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
},
"styles": {
"textAlignment": "center"
},
"header": {
"text": "DropDown Edit",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
domainOnly
가 true이면 목록에 있는 값들만 선택할 수 있습니다.
textReadOnly
가 true이면 키 입력이 안되며 선택만 할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
...
//컬럼설정
{
"name": "CustomerID2",
"fieldName": "CustomerID",
"width": "150",
"sortable": false,
"editor": {
"type": "dropDown",
"dropDownCount": 4,
"domainOnly": true,
"textReadOnly": true,
"values": ["VINET", "HANAR", "SUPRD", "VICTE", "THREE", "SEVEN"],
"labels": ["<VINET>", "<HANAR>", "<SUPRD>", "<VICTE>", "<THREE>", "<SEVEN>"]
},
"styles": {
"textAlignment": "center"
},
"header": {
"text": "Domain Only",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
검색 편집기는 설정된 값 중에 일치되는 값이 드롭다운 목록에 표시되는 에디터 이다. 검색이 시작되면 gridView.onEditSearch() 이벤트가 발생하며, 이 이벤트 내에서 검색 처리 후 gridView.fillEditSearchItems()을 실행해 드롭다운 목록을 채워준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
...
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
},
"styles": {
"textAlignment": "center"
},
"header": {
"text": "Search Editor ",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
날짜 편집기를 사용하면 키보드로 날짜를 입력하거나 달력 팝업을 사용하여 날짜를 선택할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
...
//컬럼설정
{
"name": "OrderDate",
"fieldName": "OrderDate",
"width": "180",
"sortable": false,
"editor": {
"type": "date",
"datetimeFormat": "yyyy.MM.dd"
},
"styles": {
"textAlignment": "center",
"datetimeFormat": "yyyy.MM.dd"
},
"header": {
"text": "Date Edit",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
minDate, maxDate를 지정하여 특정기간만 선택할 수 있습니다.
1
2
3
4
5
6
gridView.setColumnProperty("OrderDate","editor", {
"type": "date",
"datetimeFormat": "yyyy.MM.dd",
"minDate": new Date("1996-07-1"),
"maxDate": new Date("1996-07-30")
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var holidays = [ {
type : "day", // 요일을 지정합니다.
days : [0,6], // 일요일,토요일
styles : {foreground:"#FFFF0000"}, // 배경색과 폰트색을 지정합니다.
tooltips : ["일요일","토요일"], // tooltip
enabled : true // false인경우 선택할수 없습니다.
}, {
type : "date", // 기념일 또는 특정일자를 지정합니다.
dates : ["01-01","03-01","05-05","08-15"], // 기념일.
styles:{foreground:"#FF000000"},
tooltips : ["신정","삼일절","어린이날","광복절"]
}, {
type:"date", // 동일한 type을 중복해서 지정할수 있습니다.
dates:["2019-05-06"],
styles:{foreground:"#FFFF0000", background:"#10FF0000"},
tooltips:["어린이날 대체휴무"]
}
];
gridView.setColumnProperty("OrderDate","editor",{type:"date",holidays:holidays})
편집 정렬
Text editor컬럼에 편집시 가운데 정렬을 설정합니다.
1
gridView.setColumnProperty("OrderID","editor",{textAlignment:"center"});