Skip to main content

ContextMenu

Description​

ContextMenu component

Usage​

<ContextMenu {api} {at} {resolver} {handler} {options} {filter} {datakey} {css} />

This page describes the properties of the DataGrid ContextMenu component which you can import from wx-svelte-grid to add or customize default context menu.

To add a custom menu, import and apply ContextMenu from wx-svelte-menu. Please, also refer to the description of ContextMenu API.

Parameters​

  • api - the api gateway object to bind the component to the DataGrid
  • at - defines the position of the menu:
    • "bottom" - the menu appears below the target node, left borders aligned (the menu goes to the right of the action area) - - "right" - the menu appears right to the target node
    • "left" - the menu appears left to the target node
    • "bottom-left" - the menu appears below the target node, right borders aligned (the menu goes to the left of the action area)
    • "bottom-fit" - the menu appears below the target node, the width of the menu is equal to the width of the target node
    • "point" - the menu appears at the specified left/top position and ignores the provided node
  • datakey - specifies the id of the elements to show Context Menu for
  • filter - the filter function that specifies what context to show for the specified targets
  • resolver - the function that takes the value of the data-context-id attribute (task id) and returns the id for the resulting event
  • options - defines menu options, see description here: defaultMenuOptions
  • handler - a function that is called when the menu item is activated
  • css - a string that specifies a CSS class to be set to the menu

Example​

More examples see here: Adding context menu.

The example below shows how to apply the "button" type to all menu items and display the dimmed text next to buttons:

<script>
  import { getData } from "../data";
  import { Grid, ContextMenu } from "wx-svelte-grid";
  
  let table;
  
  function init(api) {
    table = api;
  }

  const data = getData();

  const options = [
    {
        id: "add:before",
        subtext: "Add before",
        icon: "wxi-table-row-plus-before",
        type: "button",
    },
    {
        id: "add:after",
        subtext: "Add after",
        icon: "wxi-table-row-plus-after",
        type: "button",
    },
    { type: "separator" },
    { id: "copy", subtext: "Copy", type: "button", icon: "wxi-content-copy" },
    { type: "separator" },
    { id: "delete", type: "button", subtext: "Delete", icon: "wxi-delete-outline" },
];
</script>

<ContextMenu api={table} {options}>
  <Grid {data} {columns} {init} />
</ContextMenu>

Related articles: