<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Column Hider Extension</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../../dojo/resources/dojo.css";
|
@import "../../../dojo/resources/dnd.css";
|
@import "../../css/dgrid.css";
|
@import "../../css/skins/claro.css";
|
.dgrid {
|
width: 750px;
|
margin: 10px;
|
}
|
.field-col1 {
|
width: 100px;
|
}
|
.field-col2 {
|
width: 100px;
|
}
|
.field-col3 {
|
width: auto;
|
}
|
.field-col4 {
|
width: 100px;
|
}
|
.field-col5 {
|
width: 150px;
|
}
|
</style>
|
<script src="../../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
// Functions defined within require callback
|
var getColumns, getAltColumns, createGrid, destroyGrid;
|
|
require(["dojo/_base/lang", "dojo/_base/declare", "dojo/dom-construct",
|
"dgrid/OnDemandGrid", "dgrid/Keyboard", "dgrid/Selection",
|
"dgrid/extensions/ColumnHider", "dgrid/extensions/ColumnResizer", "dgrid/extensions/ColumnReorder",
|
"dgrid/test/data/testStore", "dojo/domReady!"],
|
function(lang, declare, domConstruct, Grid, Keyboard, Selection, ColumnHider, ColumnResizer, ColumnReorder, testStore){
|
var columns = {
|
col1: "Column 1Column1Column 1 Column 1",
|
col2: { label: "Column2 (unhidable)", sortable: false, unhidable: true },
|
col3: {
|
label: "Column3 (initially hidden)",
|
hidden: true
|
},
|
col4: "Column 4",
|
col5: "Column 5"
|
},
|
altColumns = [
|
// Specify IDs with special chars to test replacement
|
{ id: "col:2", field: "col2", label: "Col2" },
|
// test setting unhidable *and* hidden (i.e. not in menu, not displayed)
|
{ id: "col:4", field: "col4", label: "Col4", sortable: false, hidden: true, unhidable: true },
|
{ id: "col:1", field: "col1", label: "Col1" },
|
{ id: "col:5", field: "col5" } // no label, to test fallback to field
|
],
|
rtl = location.search.indexOf("rtl") !== -1,
|
grid,
|
gridResize,
|
gridReorder;
|
|
if(rtl) {
|
document.documentElement.setAttribute("dir", "rtl");
|
}
|
domConstruct.create('a', {
|
href: 'ColumnHider.html' + (rtl ? '' : '?rtl'),
|
innerHTML: 'Switch to ' + (rtl ? 'LTR' : 'RTL')
|
}, document.body, 'first');
|
|
getColumns = function(){
|
return lang.clone(columns);
|
};
|
|
getAltColumns = function(){
|
return lang.clone(altColumns);
|
};
|
|
createGrid = function(){
|
if(grid){
|
var next = grid.domNode.nextSibling;
|
grid.destroy();
|
domConstruct.create('div', { id: 'grid' }, next, 'before');
|
}
|
grid = window.grid = new (declare([Grid, Keyboard, Selection, ColumnHider]))({
|
collection: testStore,
|
columns: getColumns()
|
}, "grid");
|
|
grid.on("dgrid-columnstatechange", function(evt){
|
console.log("Column for field " + evt.column.field + " is now " +
|
(evt.hidden ? "hidden" : "shown"));
|
});
|
};
|
|
createGrid();
|
|
gridResize = window.gridResize = new (declare([Grid, Selection, ColumnHider, ColumnResizer]))({
|
collection: testStore,
|
columns: lang.clone(columns)
|
}, "gridresize");
|
gridReorder = window.gridReorder = new (declare([Grid, Selection, ColumnReorder, ColumnHider]))({
|
collection: testStore,
|
columns: lang.clone(columns)
|
}, "gridreorder");
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<h2>A basic grid with the column hider plugin</h2>
|
<div id="grid"></div>
|
<div>Buttons to test changing column structure and recreating grid:
|
<button onclick="grid.set('columns', getColumns());">Original Structure</button>
|
<button onclick="grid.set('columns', getAltColumns());">New Structure</button>
|
<button onclick="createGrid();">Recreate Grid</button>
|
</div>
|
<h2>Another grid w/ ColumnHider and ColumnResizer</h2>
|
<div id="gridresize"></div>
|
<h2>Another grid w/ ColumnHider and ColumnReorder</h2>
|
<div id="gridreorder"></div>
|
</body>
|
</html>
|
