Context Menu

DataGridXL ships with a built-in context menu. You know, that menu that pops up when you right-click inside the component.

You can customize the items it holds. The contextMenuItems option takes an array of Context Menu Items:

var grid = new DataGridXL("grid", {
  data: [ ... ],
  contextMenuItems: [
    "copy",
    "cut",
    "paste",
    "delete_rows",
    "insert_rows_up",
    "insert_rows_down",
    "delete_cols",
    "insert_cols_up",
    "insert_cols_down"
  ]
});

These string values like "copy" and "cut" are secretly shortcuts to predefined Context Menu Items.

The string "copy" refers to a Context Menu Item that actually looks like this:

{
    "label": "Copy",
    "method": function(){
      this.copy();
    },
    "shortcutLabel": "Ctrl+C",
    "shortcutLabelMac": "⌘C"
}

Another example: "delete_rows" is a shortcut to this Context Menu Item:

{
    "label": "Delete Rows",
    "method": function(){
      this.deleteRows(this.getRowSelection());
    },
    "disabled": function(){
      if(this.getRowSelection() == null){
        return true;
      } else {
        return false;
      }
    }
}

Notice that the predefined "Delete Rows" item has a disabled property; a function that must return either true or false.

The disabled function will run each time just before the context menu opens. This means that the "Delete Rows" menu item will be disabled (unselectable) when there is no row selection (at the time the context menu is opened).

We've created these predefined menu items to save you a bit of time & hassle in case you want to customize your context menu.

Custom Menu Items

These predefined items might not always be enough. As an example, we don't have a prefedined item for "Select All". In this case, you could supply this item yourself:

{
    "label": "Select All",
    "method": function(){
      this.selectAll();
    },
    "shortcutLabel": "Ctrl+A",
    "shortcutLabelMac": "⌘A"
}

You can mix the predefined menu item shortcuts with your own menu items, like this:

var grid = new DataGridXL("grid", {
  data: [ ... ],
  contextMenuItems: [
    "copy",
    "cut",
    {
      // my custom item
      "label": "Select All",
      "method": function(){
        this.selectAll();
      },
      "shortcutLabel": "Ctrl+A",
      "shortcutLabelMac": "⌘A"
    },
    "insert_rows"
  ]
});

Why haven't we included a predefined "Select All" item, you ask... Well, if we had we could not have written this tutorial. Clever!

Context Menu for touch screens

The Context Menu does not show on touch devices. Touch devices show a different context menu: ContextMenuTouch. Creating a custom context menu for touch devices works in pretty much the same way:

var grid = new DataGridXL("grid", {
  data: [ ... ],
  contextMenuTouchItems: [
    "cut",
    "copy"
  ]
});

We recommend passing only a small number of items to your Context Menu Touch. Even though DataGridXL works pretty decent on touch screens, keyboard & mouse controls still offer a smoother edit experience for your user.

It doesn't help that iOS Safari does not support a paste operation from a menu. That's why for now we don't offer a predefined "paste" item for your Context Menu Touch. See our Copy & Paste page for more details on that topic.

Advanced

Should you console.log your DataGridXL instance, you'll see two private properties: _contextMenuItemPresets and _contextMenuTouchItemPresets. As you might have guessed, these properties hold the predefined Context Menu items that you can include in your custom menu.