<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Column Hider Extension: Large Menu</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../../dojo/resources/dojo.css";
|
@import "../../css/dgrid.css";
|
@import "../../css/skins/claro.css";
|
|
/* This selector made more specific to cleanly override height */
|
.dgrid.dgrid-grid {
|
width: 750px;
|
margin: 10px;
|
height: 20em;
|
}
|
</style>
|
<script src="../../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
var columns1, columns2;
|
require(["dojo/_base/lang", "dojo/_base/declare",
|
"dgrid/OnDemandGrid", "dgrid/Selection", "dgrid/Keyboard",
|
"dgrid/extensions/ColumnHider",
|
"dstore/Memory", "dojo/domReady!"],
|
function(lang, declare, Grid, Selection, Keyboard, ColumnHider, Memory){
|
var columns = {}, data = {id: "1"};
|
|
for (var i = 1; i <= 20; ++i) {
|
data["col" + i] = "Value " + i;
|
columns["col" + i] = "Column " + i;
|
}
|
|
var store = window.store = new Memory({
|
data: [data]
|
});
|
|
var grid = window.grid = new (declare([Grid, Selection, Keyboard, ColumnHider]))({
|
collection: store,
|
columns: columns
|
}, "grid");
|
|
grid.on("dgrid-columnstatechange", function(evt){
|
console.log("Column for field " + evt.column.field + " is now " +
|
(evt.hidden ? "hidden" : "shown"));
|
});
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<h2>A grid with many, many columns, to demonstrate the resizing ColumnHider menu</h2>
|
<div id="grid"></div>
|
</body>
|
</html>
|
