팝업 메뉴 버튼

팝업 메뉴 버튼은 column.button = popup 으로 지정하면 사용할 수 있습니다.

메뉴 정보 구성

팝업 메뉴의 각 메뉴 아이템은 check 상태를 가질 수 있고, group 속성을 통해 radio group으로 구성할 수도 있습니다.

var menu = [
  {
    label: "menu1 입니다.",
    enabled: true,
    children: [
      {
        label: "submenu1 입니다."
      },
      {
        label: "submenu2 입니다."
      }
    ]
  },
  {
    label: "menu2 입니다",
    enabled: false
  },
  {
    label: "-"
  },
  {
    label: "menu3 입니다",
    type: "check", //check 설정
    checked: true, //check 상태
    tag: "check_menu"
  },
  {
    label: "group menu", //group 및 radio
    children: [
      {
        label: "group1 - 첫번째",
        type: "radio",
        group: "group1",
        checked: true
      },
      {
        label: "group1 - 두번째",
        type: "radio",
        group: "group1"
      },
      {
        label: "group1 - 세번째",
        type: "radio",
        group: "group1"
      }
    ]
  }
];

PopupMenu 추가

위에서 구성된 메뉴 정보를 그리드 addPopupMenu 함수로 추가할 수 있습니다.
추가된 menu1 을 컬럼에 설정하는 방법은 컬럼 설정 정보를 확인하세요.

gridView.addPopupMenu("menu1", menu);

컬럼 PopupMenu 설정

column.popMenu 속성에 addPopupMenu로 추가한 메뉴를 지정합합니다.

var columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "100",
    popupMenu: "menu1",
    button: "popup",
    buttonVisibility: "always",
    header: {
      text: "이름",
      styleName: "orange-column"
    },
  },
  ...
];
 
gridView.setColumns(columns);

onMenuItemClicked 이벤트

메뉴 아이템이 클릭되면 onMenuItemClicked 이벤트가 발생됩니다.

gridView.onMenuItemClicked = function(grid, data, index) {
  alert(data.label);
};

셀 버튼을 다루는 다른 방법

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

헤더 PopupMenu 추가

메뉴 정보를 그리드 addPopupMenu 함수로 추가할 수 있습니다.
추가된 menu2 를 컬럼 헤더에 설정하는 방법은 아래를 참조하세요.

var menu = [{
 label: "menu1 입니다.",
 enabled: true,
 children: [{
  label: "submenu1 입니다.",
  callback:function(grid, index){console.log(index)}
 }, {
  label: "submenu2 입니다."
 }]
 }, {
  label: "menu2 입니다",
  enabled: false
}];
gridView.addPopupMenu("menu2", menu);
 
gridView.setColumnProperty("KorName","header",{popupMenu:"menu2"});

셀 버튼 셀 병합