드롭다운 편집기
드롭다운 편집기 는 values속성으로 지정된 목록 중 한 값을 선택합니다. 또한, labels에 values 대신 드롭다운 리스트에 표시될 텍스트들을 지정할 수 있습니다.
labels의 항목 수가 values 항목 수는 동일해야하고 목록에 없는 값이 들어온 경우 원래 값 그대로 보입니다.
에디터에 values, labels를 지정하지 않으면 컬럼에 지정된 values, labels 목록이나 lookupSource의 목록을 대신 사용하기 때문에 특별한 경우가 아니라면 별도로 지정할 필요가 없습니다.
그리고 lookupDisplay속성을 true로 지정하여야 그리드에는 label값으로 표시됩니다.
...
//컬럼설정
{
name: "CustomerID",
fieldName: "CustomerID",
width: 150,
sortable: false,
lookupDisplay: true,
values: [
"VINET",
"HANAR",
"SUPRD",
"VICTE",
"RATTC",
"WARTH"
],
labels: [
"Vins et alcools Chevalier",
"Hanari Carnes",
"Suprêmes délices",
"Victuailles en stock",
"Rattlesnake Canyon Grocery",
"Wartian Herkku"
],
editor: {
type: "dropdown"
},
header: {
text: "DropDown",
styleName: "orange-column"
}
},
...domainOnly가 true이면 목록에 있는 값들만 선택할 수 있습니다.
textReadOnly가 true이면 키 입력이 안되며 선택만 할 수 있습니다.
...
//컬럼설정
{
name: "CustomerID2",
fieldName: "CustomerID",
width: 150,
sortable: false,
lookupDisplay: true,
values: [
"VINET",
"HANAR",
"SUPRD",
"VICTE",
"RATTC",
"WARTH"
],
labels: [
"Vins et alcools Chevalier",
"Hanari Carnes",
"Suprêmes délices",
"Victuailles en stock",
"Rattlesnake Canyon Grocery",
"Wartian Herkku"
],
editor: {
type: "dropdown",
dropDownCount: 4,
domainOnly: true,
textReadOnly: true
},
header: {
text: "dropdown.domainOnly, textReadOnly",
styleName: "orange-column"
}
},
...partialMacth가 편집기에서 사용자 키 입력으로 부분 문자열만 일치하더라도 검색하여 선택할 수 있습니다.
...
//컬럼설정
{
name: "CountryKor",
fieldName: "Country",
width: "150",
sortable: false,
lookupDisplay: true,
values: [
"Austria",
"Belgium",
"Brazil",
"Finland",
"France",
"Germany",
"Ireland",
"Italy",
"Mexico",
"Spain",
"Sweden",
"Switzerland",
"UK",
"USA",
"Venezuela"
],
labels: [
"오스트리아",
"벨기에",
"브라질",
"핀란드",
"프랑스",
"독일",
"아일랜드",
"이탈리아",
"멕시코",
"스페인",
"스웨덴",
"스위스",
"영국",
"미국",
"베네수엘라"
],
editor: {
type: "dropdown",
dropDownCount: 5,
partialMatch: true
},
header: {
text: "dropdown.partialMatch",
styleName: "orange-column"
}
},
...editor.values, labels
특별한 경우가 아니라면 사용하지 않는 속성입니다. 그리드 화면에는 values, labels에 지정된 모든 값들이 보이지만, 드롭다운 편집기가 펼쳐졌을때에는 다른 목록이나 일부만 선택할 수 있게 할 때 사용합니다. 아래 예제는 모든 값들이 label값으로 보이지만 dropdown 편집기를 열어보면 2개의 목록만 보입니다.
...
//컬럼설정
{
name: "CountryKor",
fieldName: "Country",
width: "150",
sortable: false,
lookupDisplay: true,
values: [
"Austria",
"Belgium",
"Brazil",
"Finland",
"France",
"Germany",
"Ireland",
"Italy",
"Mexico",
"Spain",
"Sweden",
"Switzerland",
"UK",
"USA",
"Venezuela"
],
labels: [
"오스트리아",
"벨기에",
"브라질",
"핀란드",
"프랑스",
"독일",
"아일랜드",
"이탈리아",
"멕시코",
"스페인",
"스웨덴",
"스위스",
"영국",
"미국",
"베네수엘라"
],
editor: {
type: "dropdown",
dropDownCount: 5,
values: [
"Brazil",
"Germany"
],
labels: [
"브라질",
"독일"
],
},
header: {
text: "editor.values, labels",
styleName: "orange-column"
}
},
...버튼 표시 여부 조작하기
column.editButtonVisibility에 always, default, hidden, rowfocused, visible를 지정하여 보여지는 방식을 설정한다.
...
//컬럼설정
{
name: "CustomerID",
fieldName: "CustomerID",
width: 150,
sortable: false,
lookupDisplay: true,
editButtonVisibility: "always", //default, hidden, rowfocused, visible
values: [
"VINET",
"HANAR",
"SUPRD",
"VICTE",
"RATTC",
"WARTH"
],
labels: [
"Vins et alcools Chevalier",
"Hanari Carnes",
"Suprêmes délices",
"Victuailles en stock",
"Rattlesnake Canyon Grocery",
"Wartian Herkku"
],
editor: {
type: "dropdown"
},
header: {
text: "always",
styleName: "orange-column"
}
},
...검색 편집기
검색 편집기는 설정된 값 중에 일치되는 값이 드롭다운 목록에 표시되는 에디터 이다. 검색이 시작되면 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
},
"styles": {
"textAlignment": "center"
},
"header": {
"text": "Search Editor ",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...드롭다운 다중선택
드롭다운 리스트의 값을 여러값 동시에 선택할 수 있습니다.
{
"name": "CustomerID3",
"fieldName": "CustomerID",
"width": "150",
"sortable": false,
"lookupDisplay": true,
"values": [
"Austria",
"Belgium",
"Brazil",
"Finland",
"France",
"Germany",
"Ireland",
"Italy",
"Mexico",
"Spain",
"Sweden",
"Switzerland",
"UK",
"USA",
"Venezuela"
],
"labels": [
"오스트리아",
"벨기에",
"브라질",
"핀란드",
"프랑스",
"독일",
"아일랜드",
"이탈리아",
"멕시코",
"스페인",
"스웨덴",
"스위스",
"영국",
"미국",
"베네수엘라"
],
"editor": {
"type": "checklist"
},
"header": {
"text": "dropdown",
"styleName": "orange-column"
}
}