<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Column Resizer</title>
|
<meta name="viewport" content="width=800">
|
<style>
|
@import "../../../dojo/resources/dojo.css";
|
@import "../../css/dgrid.css";
|
@import "../../css/skins/claro.css";
|
.heading {
|
font-weight: bold;
|
padding-bottom: 0.25em;
|
}
|
.dgrid {
|
width: 750px;
|
margin: 10px;
|
}
|
#grid .field-col1 {
|
width: 100px;
|
}
|
#grid .field-col2 {
|
width: 100px;
|
}
|
#grid .field-col3 {
|
width: auto;
|
}
|
#grid .field-col4 {
|
width: 100px;
|
}
|
#grid .field-col5 {
|
width: 150px;
|
}
|
|
#gridWide .field-col1,
|
#gridWide .field-col2,
|
#gridWide .field-col3,
|
#gridWide .field-col4,
|
#gridWide .field-col5 {
|
width: 200px;
|
}
|
|
#gridPrevent .field-col1 {
|
width: 100px;
|
}
|
#gridPrevent .field-col2 {
|
width: 100px;
|
}
|
#gridPrevent .field-col3 {
|
width: auto;
|
}
|
#gridPrevent .field-col4 {
|
width: 100px;
|
}
|
#gridPrevent .field-col5 {
|
width: 150px;
|
}
|
|
#gridPersist .field-col1 {
|
width: 100px;
|
}
|
#gridPersist .field-col2 {
|
width: 100px;
|
}
|
#gridPersist .field-col3 {
|
width: 100px;
|
}
|
#gridPersist .field-col4 {
|
width: 100px;
|
}
|
#gridPersist .field-col5 {
|
width: 150px;
|
}
|
|
.testrelative {
|
position: relative;
|
left: 25px;
|
top: 25px;
|
width: 750px;
|
}
|
</style>
|
<script>
|
var start= new Date().getTime();
|
</script>
|
<script src="../../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
require(["dgrid/OnDemandGrid", "dgrid/extensions/ColumnResizer", "dgrid/Keyboard", "dgrid/Selection", "dojo/_base/declare", "dojo/_base/lang", "dojo/on", "dojo/cookie", "dojo/json", "dgrid/test/data/testStore", "dojo/domReady!"],
|
function(Grid, ColumnResizer, Keyboard, Selection, declare, lang, on, cookie, json, testStore){
|
var columns = { // you can declare columns as an object hash (key translates to field)
|
col1: 'Column 1Column1Column 1 Column 1',
|
col2: {label: 'Column2222222222222222222222222', sortable: false},
|
col3: { label: 'Column3333333333333333333', resizable: false },
|
col4: 'Column 4',
|
col5: 'Column 5'
|
};
|
columns1 = lang.clone(columns);
|
|
// columns2 tests using an array of columns with explicit IDs,
|
// including special characters to test replacement
|
columns2 = [
|
{ id: "col:2", field: "col2", label: "Column 2" },
|
{ id: "col:4", field: "col4", label: "Column 4", sortable: false },
|
{ id: "col:1", field: "col1", label: "Column 1" },
|
{ id: "col:5", field: "col5", label: "Column 5" }
|
];
|
|
var ResizeGrid = declare([Grid, Selection, ColumnResizer]);
|
window.grid = new ResizeGrid({
|
collection: testStore,
|
columns: columns1
|
}, "grid");
|
window.gridPeriod = new (declare([Grid, Keyboard, Selection, ColumnResizer]))({
|
id: "gridPeriod",
|
collection: testStore,
|
columns: columns1
|
}, "grid.period");
|
window.gridWide = new ResizeGrid({
|
collection: testStore,
|
columns: lang.clone(columns)
|
}, "gridWide");
|
window.gridPrevent = new ResizeGrid({
|
collection: testStore,
|
columns: lang.clone(columns)
|
}, "gridPrevent");
|
|
var columnWidths = cookie('dgrid-columnWidths');
|
columnWidths = columnWidths ? json.parse(columnWidths) : {};
|
|
var persistentColumns = lang.clone(columns);
|
for(var name in persistentColumns){
|
if(name in columnWidths){
|
if(typeof persistentColumns[name] === 'string'){
|
persistentColumns[name] = { label: persistentColumns[name] };
|
}
|
persistentColumns[name].width = columnWidths[name];
|
}
|
}
|
window.gridPersist = new ResizeGrid({
|
collection: testStore,
|
columns: persistentColumns
|
}, "gridPersist");
|
|
on(document.body, 'dgrid-columnresize', function(event){
|
var grid = event.grid;
|
console.log('grid ' + grid.id + ' Column "' + event.columnId + '" size changed: ' + event.width +
|
(event.parentType ? " (triggered by " + event.parentType + ")" : ""));
|
if(grid === window.gridPrevent && event.width > 200){
|
event.preventDefault();
|
}
|
if(grid === window.gridPersist && event.parentType){
|
// Persist new width to cookie
|
columnWidths[event.columnId] = event.width;
|
cookie('dgrid-columnWidths', json.stringify(columnWidths));
|
}
|
});
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<h2>A basic grid with column resizing</h2>
|
<div id="grid"></div>
|
<div>Buttons to test changing column structure:
|
<button onclick="grid.set('columns', columns2);">New Structure</button>
|
<button onclick="grid.set('columns', columns1);">Original</button>
|
</div>
|
<div>Buttons to test adjusting last column when resizing below the table's width:
|
<button onclick="grid.set('adjustLastColumn', true);">Enable</button>
|
<button onclick="grid.set('adjustLastColumn', false);">Disable</button>
|
</div>
|
<h2>A basic grid with Keyboard navigation and a period in its ID, to ensure injected size rules work</h2>
|
<div id="grid.period"></div>
|
<h2>Another grid w/ columns whose width initially exceed the table's width,
|
placed within a relatively-positioned element</h2>
|
<div class="testrelative">
|
<div id="gridWide"></div>
|
</div>
|
<h2>Grid w/ columns whose resize will be prevented if the column will end up larger than 200px</h2>
|
<div id="gridPrevent"></div>
|
<h2>Grid w/ columns whose sizes will persist across page refreshes</h2>
|
<div id="gridPersist"></div>
|
</body>
|
</html>
|
