// This file locates: "Scripts/Lesson/C1Mvc/WijmoShowPopup.js".
c1.documentReady(function () {
// generate some random data
var data = [],
countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'],
products = ['Widget', 'Sprocket', 'Gadget', 'Doohickey'],
colors = ['Black', 'White', 'Red', 'Green', 'Blue'],
dt = new Date();
for (var i = 0; i < 100; i++) {
var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
countryId = Math.floor(Math.random() * countries.length),
productId = Math.floor(Math.random() * products.length),
colorId = Math.floor(Math.random() * colors.length);
var item = {
id: i,
start: date,
end: date,
country: countries[countryId],
product: products[productId],
color: colors[colorId],
countryId: countryId,
productId: productId,
colorId: colorId,
amount1: Math.random() * 10000 - 5000,
amount2: Math.random() * 10000 - 5000,
amount3: Math.random() * 10000 - 5000,
amount4: Math.random() * 10000 - 5000,
amount5: Math.random() * 10000 - 5000,
discount: Math.random() / 4,
active: i % 4 == 0
};
data.push(item);
}
var theGrid = wijmo.Control.getControl('#theGrid');
theGrid.itemsSource = data;
theGrid.formatItem.addHandler(function (s, e) {
if (e.panel == s.topLeftCells) {
e.cell.innerHTML = '<span class="column-picker-icon glyphicon glyphicon-cog"></span>';
}
});
var theColumnPicker = wijmo.Control.getControl('#theColumnPicker');
theColumnPicker.initialize({
itemsSource: theGrid.columns,
checkedMemberPath: 'visible',
displayMemberPath: 'header',
lostFocus: function () {
wijmo.hidePopup(theColumnPicker.hostElement);
}
});
// show the column picker when the user clicks the top-left cell
var ref = theGrid.hostElement.querySelector('.wj-topleft');
ref.addEventListener('mousedown', function (e) {
if (wijmo.hasClass(e.target, 'column-picker-icon')) {
wijmo.showPopup(theColumnPicker.hostElement, ref, false, true, false);
theColumnPicker.focus();
e.preventDefault();
}
});
// save/restore layout buttons
document.getElementById('btnSave').addEventListener('click', function () {
localStorage.setItem('myLayout', theGrid.columnLayout);
});
document.getElementById('btnRestore').addEventListener('click', function () {
var layout = localStorage.getItem('myLayout');
if (layout) {
theGrid.columnLayout = layout;
}
});
});
// This file locates: "Content/css/Lesson/C1Mvc/WijmoShowPopup.css".
.column-picker {
columns: 3;
padding: 12px;
margin-left: 12px;
margin-top: 26px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.column-picker-icon {
cursor: pointer;
color: #FF8754;
margin: 3px;
}
using System.Web.Mvc;
namespace LearnMvcClient.Controllers
{
public partial class C1MvcController : Controller
{
// GET: WijmoShowPopup
public ActionResult WijmoShowPopup()
{
return View();
}
}
}
<h1>
@Html.Raw(Resources.C1Mvc.WijmoShowPopup_Title)
</h1>
<p>
@Html.Raw(Resources.C1Mvc.WijmoShowPopup_Text1)
</p>
<p>
@Html.Raw(Resources.C1Mvc.WijmoShowPopup_Text2)
</p>
@Html.C1().FlexGrid().Id("theGrid").Height(300)
<div style="display:none">
@Html.C1().ListBox().Id("theColumnPicker").CssClass("column-picker")
</div>
<p>
@Html.Raw(Resources.C1Mvc.WijmoShowPopup_Text3)
</p>
<button id="btnSave" class="btn btn-default">
@Html.Raw(Resources.C1Mvc.WijmoShowPopup_Text4)
</button>
<button id="btnRestore" class="btn btn-default">
@Html.Raw(Resources.C1Mvc.WijmoShowPopup_Text5)
</button>