셀 버튼
셀 버튼은 column.button = action 으로 지정하면 사용할 수 있습니다.
var columns = [
{
name: "KorName",
fieldName: "KorName",
width: "100",
header: {
text: "이름",
styleName: "orange-column",
},
button:"action",
buttonVisibility: "always"
},
...
];
gridView.setColumns(columns);버튼 클릭 이벤트
셀버튼 클릭 이벤트
gridView.onCellButtonClicked = function(grid, index, column) {
alert(
"CellButton Clicked: itemIndex=" +
index.itemIndex +
", fieldName=" +
column.fieldName
);
};셀 버튼을 다루는 다른 방법
always: 항상 표시default: hovering, focused상태에서 표시visible: focused상태만 표시hidden: 표시하지 않음
gridView.columnByName("KorName").buttonVisibility = "always";gridView.columnByName("KorName").buttonVisibility = "default";gridView.columnByName("KorName").buttonVisibility = "visible";gridView.columnByName("KorName").buttonVisibility = "hidden";버튼 렌더러
버튼 렌더러는 renderer.type = "button" 으로 지정하면 사용할 수 있습니다.
현재 셀의 값이 버튼에 표시됩니다.
{
name: "KorCountry",
fieldName: "KorCountry",
width: "100",
header: {
text: "투자국가",
styleName: "orange-column"
},
editable:false,
renderer:{
type:"button"
}
}버튼 렌더러 클릭 이벤트
gridView.onCellItemClicked = function (grid, index, clickData) {
alert(clickData.value + " 버튼이 클릭 되었습니다.")
return true;
}동적으로 버튼 렌더러를 사용
투자국가의 값이 캐나다인 경우 버튼이 표시되도록 구현한 예제 입니다.
var columns = [
...
{
name: "KorCountry",
fieldName: "KorCountry",
width: "100",
header: {
text: "투자국가"
},
},
{
name: "Gender",
fieldName: "Gender",
width: "70",
header: {
text: "버튼",
styleName: "orange-column"
},
editable:false,
styleCallback: function(grid, dataCell){
var ret = {}
var korCountry = grid.getValue(dataCell.index.itemIndex, "korCountry");
ret.renderer = korCountry == '캐나다' ? {type:"button"} : {};
return ret;
},
displayCallback: function(grid, index, value) {
var korCountry = grid.getValue(index.itemIndex, "korCountry");
return korCountry == '캐나다' ? value : '';
}
},
...
];
gridView.setColumns(columns);
gridView.onCellItemClicked = function (grid, index, clickData) {
alert(clickData.value + " 버튼이 클릭 되었습니다.")
return true;
}