셀 버튼

셀 버튼은 column.button = action 으로 지정하면 사용할 수 있습니다.

  var columns = [
    {
      name: "KorName",
      fieldName: "KorName",
      width: "100",
      header: {
        text: "이름",
        styleName: "orange-column",
      },
      button:"action",
      buttonVisibility: "always"
    },
    ...
  ];

  gridView.setColumns(columns);

버튼 클릭 이벤트

셀버튼 클릭 이벤트

• onCellButtonClicked

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;
}