// 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> " + Resources.C1Input.MenusContextMenus_Text7).CommandParameter("NEW");
items.Add().Header("<span class=\"glyphicon glyphicon-folder-open\"></span> " + Resources.C1Input.MenusContextMenus_Text8).CommandParameter("OPEN");
items.Add().Header("<span class=\"glyphicon glyphicon-floppy-disk\"></span> " + Resources.C1Input.MenusContextMenus_Text9).CommandParameter("SAVE");
items.AddSeparator();
items.Add().Header("<span class=\"glyphicon glyphicon-remove\"></span> " + Resources.C1Input.MenusContextMenus_Text10).CommandParameter("EXIT");
})
.CssStyle("display", "none")
)