RealGrid2 Guide
Cell components
popup menu

Pop-up menu button

The pop-up menu button can be used by specifying column.button = popup.

Configuring menu information

Each menu item in the pop-up menu can have a check state and can be configured as a radio group through the group property.

var menu = [
   {
     label: "menu1.",
     enabled: true,
     children: [
       {
         label: "This is submenu1."
       },
       {
         label: "This is submenu2."
       }
     ]
   },
   {
     label: "This is menu2",
     enabled: false
   },
   {
     label: "-"
   },
   {
     label: "This is menu3",
     type: "check", //check settings
     checked: true, //check status
     tag: "check_menu"
   },
   {
     label: "group menu", //group and radio
     children: [
       {
         label: "group1 - first",
         type: "radio",
         group: "group1",
         checked: true
       },
       {
         label: "group1 - second",
         type: "radio",
         group: "group1"
       },
       {
         label: "group1 - third",
         type: "radio",
         group: "group1"
       }
     ]
   }
];

Add PopupMenu

You can add the menu information configured above to the grid with the addPopupMenu function. For information on how to set the added menu1 to a column, check the column setting information.

gridView.addPopupMenu("menu1", menu);

Column PopupMenu settings

Specify the menu added with addPopupMenu in the column.popMenu property.

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

onMenuItemClicked event

When a menu item is clicked, the onMenuItemClicked event is triggered.

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

Other ways to deal with cell buttons

  • always: always displayed
  • default: Displayed in hovering, focused state
  • visible: Displays only the focused state
  • hidden: do not display
gridView.columnByName("KorName").buttonVisibility = "always";
gridView.columnByName("KorName").buttonVisibility = "default";
gridView.columnByName("KorName").buttonVisibility = "visible";
gridView.columnByName("KorName").buttonVisibility = "hidden";

Add header PopupMenu

You can add menu information to the grid with the addPopupMenu function. See below for how to set the added menu2 to the column header.

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