<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Pagination Extension</title>
|
<meta name="viewport" content="width=570">
|
<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;
|
}
|
|
#grid2 .dgrid-row {
|
height: 22px;
|
}
|
#grid2 .dgrid-cell {
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
/* styles for columnset grid */
|
#gridColumnSet .dgrid-cell {
|
width: 100px;
|
}
|
#gridColumnSet .field-col4 {
|
width: 20em;
|
}
|
</style>
|
<script src="../../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
require(["dgrid/Grid", "dgrid/extensions/Pagination",
|
"dgrid/Selection", "dgrid/Keyboard", "dgrid/ColumnSet", "dgrid/GridFromHtml",
|
"dojo/_base/lang", "dojo/_base/declare", "dojo/on", "dojo/dom-construct", "dojo/dom-form",
|
"dgrid/test/data/errorStores", "dgrid/test/data/testStore", "dgrid/test/data/createSyncStore",
|
"dgrid/test/data/createAsyncStore", "dgrid/test/data/genericData",
|
"dojo/domReady!"],
|
function(
|
Grid, Pagination, Selection, Keyboard, ColumnSet, GridFromHtml,
|
lang, declare, on, domConstruct, domForm, errorStores, testStore,
|
createSyncStore, createAsyncStore, genericData
|
){
|
|
window.errorStores = errorStores; // for easy access by button handlers
|
window.testStore = testStore;
|
window.testAsyncStore = createAsyncStore({ data: genericData });
|
window.emptyAsyncStore = createAsyncStore();
|
|
var CustomGrid = declare([Grid, Keyboard, Selection, Pagination]);
|
|
getColumns = function(){
|
return {
|
id: "ID",
|
col1: 'Column 1',
|
col2: {label: 'Column2', sortable: false},
|
col3: 'Column 3',
|
col4: 'Column 4',
|
col5: 'Column 5'
|
};
|
};
|
getColumns2 = function(){
|
return {
|
col2: 'Col2',
|
col4: {label: 'Col4', sortable: false},
|
col1: 'Col1',
|
col5: 'Column 5'
|
};
|
};
|
|
function createGrid(args){
|
window.grid = new CustomGrid(lang.mixin({
|
collection: testAsyncStore,
|
columns: getColumns(),
|
noDataMessage: "No results.",
|
loadingMessage: "Loading..."
|
}, args),
|
"grid");
|
}
|
createGrid();
|
|
var form = document.getElementById("configForm");
|
form.onsubmit = function() {
|
var args = domForm.toObject(form);
|
args.pagingLinks = +args.pagingLinks;
|
args.rowsPerPage = +args.rowsPerPage;
|
if (!args.previousNextArrows) { args.previousNextArrows = false; }
|
if (!args.showLoadingMessage) { args.showLoadingMessage = false; }
|
|
// recreate grid using args from form
|
window.grid.destroy();
|
domConstruct.create("div", { id: "grid" }, form, "after");
|
createGrid(args);
|
|
return false;
|
};
|
|
on(document.body, "dgrid-error", function(evt){
|
console.warn("error on grid: ", evt.grid.id, evt.error);
|
});
|
|
// auto-height grid
|
var grid2 = window.grid2 = new CustomGrid({
|
className: "dgrid-autoheight",
|
collection: testStore,
|
columns: getColumns2(),
|
pagingLinks: false,
|
pagingTextBox: true,
|
firstLastArrows: true,
|
rowsPerPage: 15,
|
pageSizeOptions: [10, 15, 25]
|
}, "grid2");
|
|
var form2 = document.getElementById("configForm2");
|
form2.onsubmit = function() {
|
var args = domForm.toObject(form2);
|
args.rowsPerPage = +args.rowsPerPage;
|
|
// set the rowsPerPage in the grid
|
window.grid2.set('rowsPerPage', args.rowsPerPage);
|
return false;
|
};
|
|
// GridFromHtml
|
window.gridfromhtml = new (declare([GridFromHtml, Keyboard, Selection, Pagination]))({
|
collection: testStore
|
}, "gridfromhtml");
|
|
// ColumnSet grid
|
window.gridColumnSet = new (declare([Grid, Keyboard, Selection, ColumnSet, Pagination]))({
|
collection: testStore,
|
columnSets: [
|
[[
|
{ label: "ID", field: "id" }
|
]], [[
|
{ label: "Column 1", field: "col1" },
|
{ label: "Column 3", field: "col3" },
|
{ label: "Column 4", field: "col4" },
|
{ label: "Column 5", field: "col5" }
|
]]
|
]
|
}, "gridColumnSet");
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<h2>A basic grid with the Pagination extension</h2>
|
<h3>Configuration</h3>
|
<form id="configForm">
|
<div><label><input type="checkbox" name="firstLastArrows">
|
Show first/last page arrows</label></div>
|
<div><label><input type="checkbox" name="previousNextArrows" checked>
|
Show previous/next page arrows</label></div>
|
<div><label><input type="checkbox" name="pagingTextBox">
|
Show "jump-to" textbox</label></div>
|
<div><label><input type="checkbox" name="showLoadingMessage" checked>
|
Show loading message while loading data</label></div>
|
<div>
|
<label><input type="text" name="rowsPerPage" value="10" size="1">
|
Number of rows to show per page</label>
|
</div>
|
<div>
|
<label><input type="text" name="pagingLinks" value="2" size="1">
|
Number of neighboring page numbers to display to each side of current
|
(0 to disable)</label>
|
</div>
|
<div><button type="submit">Update Grid</button></div>
|
</form>
|
<div id="grid"></div>
|
<div>Buttons to test changing column structure:
|
<button onclick="grid.set('columns', getColumns2());">New Structure</button>
|
<button onclick="grid.set('columns', getColumns());">Original Structure</button>
|
</div>
|
<div>Buttons to test different stores:
|
<button onclick="grid.set('collection', testAsyncStore);">Set to async store</button>
|
<button onclick="grid.set('collection', testStore);">Set to sync store</button>
|
<button onclick="grid.set('collection', emptyAsyncStore);">Set to empty store</button>
|
<button onclick="grid.set('collection', errorStores.asyncFetch);">Set to error store</button>
|
</div>
|
<div>Buttons to test store operations:
|
<button onclick="grid.collection.remove(5);">Delete item with id 5 from store</button>
|
<button onclick="grid.collection.add({col1:'new', col2:true});">Add item to store</button>
|
<button onclick="grid.set('showFooter', !grid.get('showFooter'));">Toggle footer</button>
|
</div>
|
|
<h2>A grid with declarative structure, with the Pagination extension</h2>
|
<table id="gridfromhtml">
|
<thead><tr>
|
<th data-dgrid-column="{ field: 'col1' }">Column 1</th>
|
<th data-dgrid-column="{ field: 'col2', sortable: false }">Column 2</th>
|
<th data-dgrid-column="{ field: 'col3' }">Column 3</th>
|
<th data-dgrid-column="{ field: 'col4' }">Column 4</th>
|
<th data-dgrid-column="{ field: 'col5' }">Column 5</th>
|
</tr></thead>
|
</table>
|
|
<h2>An autoheight grid with the Pagination extension,
|
with a rows-per-page drop-down</h2>
|
<form id="configForm2">
|
<div>
|
<label><input type="text" name="rowsPerPage" size="1">
|
Number of rows to show per page</label>
|
</div>
|
<div><button type="submit">Update</button> (The rowsPerPage value will be set without recreating the grid.)</div>
|
</form>
|
<div id="grid2"></div>
|
|
<h2>A grid with ColumnSets with the Pagination extension</h2>
|
<div id="gridColumnSet"></div>
|
</body>
|
</html>
|
