Context Menus

You can use the Menu control to create context menus.

For example, this fiddle creates a single context menu and handles the 'contextmenu' event on several elements to show the menu when the user requests it:

The same approach works with all Wijmo controls:

FlexChart with ContextMenu

FlexGrid with ContextMenu

// This file locates: "Scripts/Lesson/C1Input/MenusContextMenus.js".
c1.documentReady(function () {
    var menu = wijmo.Control.getControl('#ctxMenu');
    menu.itemClicked.addHandler(function (s, e) {
        alert('Executing **' + menu.selectedValue + '** for element **' + menu.owner.id + '**');
    });
 
    // use it as a context menu for one or more elements
    var els = document.querySelectorAll('.has-ctx-menu');
    for (var i = 0; i < els.length; i++) {
        els[i].addEventListener('contextmenu', function (e) {
            menu.owner = wijmo.closest(e.target, '.has-ctx-menu');
            if (menu.owner) {
                e.preventDefault();
                menu.show(e);
            }
        }, true);
    }
});

// This file locates: "Content/css/Lesson/C1Input/MenusContextMenus.css".
.owners:after {
  content: "";
  clear: both;
  display: block;
}
.owners > div {
  float: left;
  margin: 20px;
  padding: 20px;
}
.wj-flexgrid {
  max-height: 250px;
}
.wj-flexchart {
  max-height: 250px;
}
 
.ctx-menu {
  padding: 3px;
  min-width: 120px;
  background: #FFFBDD;
}
 
.ctx-menu .wj-listbox-item {
  text-align: center;
  margin: 6px;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: MenusContextMenus
        public ActionResult MenusContextMenus()
        {
            return View(Models.FlexChartData.GetSales1());
        }
    }
}

@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1Input.MenusContextMenus_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Input.MenusContextMenus_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.MenusContextMenus_Text2)
</p>
 
<div class="owners">
    <div id="FIRST" class="has-ctx-menu" style="background:#f0a0a0">
        @Html.Raw(Resources.C1Input.MenusContextMenus_Text3)
    </div>
    <div id="SECOND" class="has-ctx-menu" style="background:#a0f0a0">
        @Html.Raw(Resources.C1Input.MenusContextMenus_Text4)
    </div>
    <div id="THIRD" class="has-ctx-menu" style="background:#a0a0f0">
        @Html.Raw(Resources.C1Input.MenusContextMenus_Text5)
    </div>
</div>
 
<p>
    @Html.Raw(Resources.C1Input.MenusContextMenus_Text6)
</p>
 
<h3>
    @Html.Raw(Resources.C1Input.MenusContextMenus_Title1)
</h3>
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .CssClass("has-ctx-menu")
    .Bind("Country", Model)
    .Series(sb =>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
    })
)
<div id="" class=""></div>
<h3>
    @Html.Raw(Resources.C1Input.MenusContextMenus_Title2)
</h3>
@(Html.C1().FlexGrid<FlexChartData.Sale>().Id("theGrid")
    .CssClass("has-ctx-menu")
    .Bind(Model)
)
 
@(Html.C1().Menu().Id("ctxMenu")
    .DropDownCssClass("ctx-menu")
    .SelectedValuePath("CommandParameter")
    .MenuItems(items=>
    {
        items.Add().Header("<span class=\"glyphicon glyphicon-asterisk\"></span>&nbsp;&nbsp;" + Resources.C1Input.MenusContextMenus_Text7).CommandParameter("NEW");
        items.Add().Header("<span class=\"glyphicon glyphicon-folder-open\"></span>&nbsp;&nbsp;" + Resources.C1Input.MenusContextMenus_Text8).CommandParameter("OPEN");
        items.Add().Header("<span class=\"glyphicon glyphicon-floppy-disk\"></span>&nbsp;&nbsp;" + Resources.C1Input.MenusContextMenus_Text9).CommandParameter("SAVE");
        items.AddSeparator();
        items.Add().Header("<span class=\"glyphicon glyphicon-remove\"></span>&nbsp;&nbsp;" + Resources.C1Input.MenusContextMenus_Text10).CommandParameter("EXIT");
    })
    .CssStyle("display", "none")
)