Docs

Context Menu

ZingGrid has a default context menu that allows you to insert rows, edit your grid, and more!

Default Menu

Simply enable a context menu by adding the context-menu attribute to your <zing-grid> element (see below). By default, the context menu only opens when you right-click on a cell.

<zing-grid context-menu></zing-grid>

Context Menu Enabled Grid:

Here is a complete grid with a right-click context menu to edit the grid as necessary:

Top

Static Menu

You can easily add a static context menu to your grid by adding the static-menu attribute instead (see below). By default, the static context menu displays in the upper right hand corner of the grid.

<zing-grid context-menu static-menu></zing-grid>

Static Context Menu Grid

Here is a complete grid with a static context menu button:

Top

Column Menu

Easily add a column toggle menu to choose which columns to display or hide by adding the columns-control attribute (see below). By default, it will appear in the upper right hand corner of your grid.

<zing-grid columns-control></zing-grid>

Column Toggle Menu

Here is a complete grid with a column toggle menu button:

Top

Custom Menu

You can also make your own context menu by using the <zg-menu> tag and setting the context-menu attribute of the grid to the id of your menu, like so:

<zing-grid context-menu="mymenu">
  <zg-menu id="mymenu">
    <img src="..." alt="Chargers Logo">
  </zg-menu>
</zing-grid>

Custom Context Menu Grid

Here is a complete grid with a context menu displaying custom text, images, and links:

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: context menu]