드롭다운 편집기
드롭다운 편집기 는 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"
}
},
...