RealGrid2 Guide
Cell components
popup menu

Pop-up menu button

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

Loading RealGrid...

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

Loading RealGrid...
  • 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.

Loading RealGrid...
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