<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Grid Store Observation</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../dojo/resources/dojo.css";
|
@import "../css/dgrid.css";
|
@import "../../dijit/themes/claro/claro.css";
|
@import "../css/skins/claro.css";
|
|
.dgrid {
|
margin: 10px;
|
}
|
|
.dgrid-grid {
|
width: 700px;
|
}
|
.dgrid-list {
|
width: 200px;
|
}
|
|
#grid2 {
|
width: 500px;
|
float: left;
|
}
|
#grid3 {
|
width: 500px;
|
float: right;
|
}
|
|
.dgrid .field-bool {
|
width: 6em;
|
}
|
.dgrid .field-type {
|
width: 80px;
|
}
|
|
#grid2 .field-date, #grid2 .field-date2 {
|
width: 16em;
|
}
|
#grid2 .field-integer {
|
width: 6em;
|
}
|
#grid2 .field-bool { /* checkbox */
|
width: 4em;
|
}
|
|
#gridAddDel, #listAddDel {
|
float: left;
|
}
|
</style>
|
<script>
|
var start= new Date().getTime();
|
</script>
|
<script src="../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
require([
|
"dojo/on",
|
"dgrid/OnDemandList",
|
"dgrid/OnDemandGrid",
|
"dgrid/Keyboard",
|
"dgrid/Selection",
|
"dgrid/Editor",
|
"dijit/form/DateTextBox",
|
"dijit/form/HorizontalSlider",
|
"dijit/form/NumberSpinner",
|
"dojo/_base/lang",
|
"dojo/_base/declare",
|
"dojo/_base/array",
|
"dojo/dom-construct",
|
"dojo/Stateful",
|
"dstore/Memory",
|
"dgrid/test/data/errorStores",
|
"dgrid/test/data/testStore",
|
"dgrid/test/data/createSyncStore",
|
"dgrid/test/data/createAsyncStore",
|
"dgrid/test/data/typesData",
|
"dgrid/test/data/largeColorData",
|
"dgrid/test/data/smallColorData",
|
"dgrid/test/data/stateData",
|
"dojo/domReady!"
|
], function(on, List, Grid, Keyboard, Selection, Editor, DateTextBox, Slider, NumberSpinner,
|
lang, declare, arrayUtil, domConstruct, Stateful, Memory, errorStores, testStore,
|
createSyncStore, createAsyncStore, typesData, largeColorData, smallColorData, stateData
|
){
|
|
function createStatefulStore() {
|
var data = [],
|
states = testStateStore.data,
|
state,
|
statefulState,
|
i,
|
total = states.length;
|
|
function watcher(name, oldValue, value) {
|
console.log(name, " updating from ", oldValue, " to ", value);
|
}
|
|
for (i = 0; i < total; i++) {
|
state = states[i];
|
statefulState = new Stateful({
|
abbreviation: state.abbreviation,
|
name: state.name
|
});
|
statefulState.watch(watcher);
|
data.push(statefulState);
|
}
|
|
return new Memory({
|
data: data,
|
idProperty: "abbreviation"
|
});
|
}
|
|
var columns = {
|
col1: 'Column 1',
|
col2: {label: 'Column 2'},
|
col3: 'Column 3',
|
col4: 'Column 4',
|
col5: 'Column 5',
|
col6: 'Column 6',
|
col7: 'Column 7'
|
};
|
|
var columns2 = [
|
{label: 'Real Number', field: 'floatNum', editor: Slider},
|
{label: 'Integer', field: 'integer', editor: NumberSpinner, editorArgs: {style: 'width: 5em;'}},
|
{
|
label: 'Text editable if checkbox checked',
|
field: 'text',
|
editor: "text",
|
editOn: "dblclick",
|
canEdit: function (object) {
|
return object.bool;
|
}
|
},
|
{label: 'Another Date (autoSave)', field: 'date2', autoSave:true, editor: DateTextBox, editOn: "focus"},
|
{label: 'Check', field: 'bool', editor: "checkbox"}
|
];
|
|
var columns3 = {
|
floatNum: 'Real Number',
|
integer: 'Integer',
|
text: 'Text',
|
date2: 'Date',
|
bool: 'Check'
|
};
|
var columns4 = {
|
col1: 'Color',
|
col2: 'A Goat',
|
col3: 'Position',
|
col4: 'Description',
|
col5: 'R',
|
col6: 'G',
|
col7: 'B'
|
};
|
var testTypesStore = createSyncStore({ data: typesData });
|
var colorStore = createSyncStore({ data: largeColorData });
|
var smallColorStore = createSyncStore({ data: smallColorData });
|
var testStateStore = createSyncStore({ data: stateData });
|
var emptyAsyncStore = createAsyncStore();
|
|
var StandardGrid = declare([Grid, Selection, Keyboard, Editor]);
|
var grid = window.grid = new StandardGrid({
|
collection: testStore,
|
columns: columns,
|
sort: "col3", // initially sort by col3 ascending
|
noDataMessage: "Nobody here but us chickens!",
|
loadingMessage: "Loading..."
|
}, "grid");
|
|
var grid2 = window.grid2 = new StandardGrid({
|
collection: testTypesStore,
|
columns: columns2,
|
selectionMode: "single"
|
},"grid2");
|
|
var grid3 = window.grid3 = new StandardGrid({
|
collection: testTypesStore,
|
columns: columns3
|
}, "grid3");
|
|
var gridAddDel = window.gridAddDel = new StandardGrid({
|
collection: smallColorStore,
|
columns: lang.clone(columns4)
|
}, "gridAddDel");
|
|
// also throw in a List connected to the same store
|
// (so additions/deletions should show up in both)
|
window.listAddDel = new (declare([List, Keyboard, Selection]))({
|
collection: smallColorStore,
|
columns: lang.clone(columns4),
|
renderRow: function(object, options){
|
// need to define renderRow to accommodate store items
|
var div = document.createElement('div');
|
div.appendChild(document.createTextNode(object.col1));
|
return div;
|
}
|
}, "listAddDel");
|
|
window.statefulGrid = new StandardGrid({
|
collection: createStatefulStore(),
|
columns: [
|
{
|
label: "Abbreviation",
|
field: "abbreviation",
|
editor: "text",
|
editOn: "dblclick"
|
},
|
{
|
label: "Name",
|
field: "name",
|
editor: "text",
|
editOn: "dblclick"
|
}
|
]
|
}, "statefulGrid");
|
|
// buttons / listeners for 1st grid
|
|
grid.on("dgrid-error", function(evt) {
|
console.warn("error on grid: ", evt.error);
|
});
|
|
on(document.getElementById("setstore"), "click", function(){
|
console.log("setting store to colorcollection: ", colorStore);
|
window.grid.set("collection", colorStore);
|
});
|
on(document.getElementById("restore"), "click", function(){
|
console.log("setting store to testStore");
|
grid.set("collection", testStore);
|
});
|
on(document.getElementById("colorQuery"), "click", function(){
|
console.log("setting store to colorStore and setting query to show only primary colors");
|
grid.set("collection", colorStore.filter({col3: "Primary"}));// store filtered to only show primary colors
|
});
|
|
var sortDescending = true;
|
|
on(document.getElementById('hasNeutralSort'), 'click', function(){
|
grid.set('hasNeutralSort', !grid.get('hasNeutralSort'));
|
console.log('hasNeutralSort is now ' + grid.get('hasNeutralSort'));
|
});
|
|
on(document.getElementById("emptyAsync"), "click", function(){
|
grid.set("collection", emptyAsyncStore);
|
});
|
|
on(document.getElementById("error"), "click", function(){
|
grid.set("collection", errorStores.asyncFetch);
|
});
|
|
on(document.getElementById("null"), "click", function(){
|
grid.set("collection", null);
|
});
|
|
// buttons / listeners for 2nd grid
|
|
function updateDirty(){
|
setTimeout(function(){
|
var dirtyDiv = document.getElementById("dirty");
|
// clear "dirty items" list after change has been processed
|
dirtyDiv.innerHTML = "";
|
for(var rowId in grid2.dirty){
|
domConstruct.create('div', {
|
innerHTML: 'rowId: ' + rowId
|
}, dirtyDiv);
|
}
|
}, 0);
|
}
|
|
grid2.on("dgrid-error", function(evt) {
|
console.warn("error on grid2: ", evt.error);
|
});
|
|
on(document.getElementById("save"), "click", function(){
|
console.log("save to store");
|
grid2.save();
|
updateDirty();
|
});
|
|
on(document.getElementById("setorigeditstore"), "click", function(){
|
grid2.set("collection", testTypesStore);
|
updateDirty();
|
});
|
|
on(document.getElementById("setdeferrorputstore"), "click", function(){
|
grid2.set("collection", errorStores.asyncPut);
|
updateDirty();
|
});
|
|
grid2.on("dgrid-datachange", updateDirty);
|
|
// buttons for 3rd grid
|
|
on(document.getElementById("add"), "click", function(){
|
var id = smallColorStore.data.length+Math.floor(Math.random()*1001);
|
console.log("id: ", id);
|
smallColorStore.put({id: id, col1: "Grey", col2: false, col3: "Hue", col4:'A hue' , col5: 192, col6: 192, col7: 192 });
|
});
|
on(document.getElementById("delete"), "click", function(){
|
for(var id in gridAddDel.selection){
|
smallColorStore.remove(id);
|
}
|
});
|
|
// hook up a listener for error events on the document to test bubbling
|
// (currently error events don't seem to bubble,
|
// but perhaps we want them to?)
|
on(document, "dgrid-error", function(evt){
|
evt.preventDefault(); // Suppress console.error
|
console.log("document received error: " + evt.error);
|
});
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<h2>Simple test to show setting a new store and query to dgrid</h2>
|
<div id="grid"></div>
|
<button id="colorQuery">Set color store and query</button>
|
<button id="hasNeutralSort">Toggle hasNeutralSort</button>
|
<br>
|
<button id="setstore">Set Color Store</button>
|
<button id="restore">Set Original Store</button>
|
<button id="emptyAsync">Set to empty store</button>
|
<button id="error">Set to error store</button>
|
<button id="null">Set store to null</button>
|
|
<br><br>
|
<h2>Simple test to show editor effect on store data</h2>
|
<div id="container" style="width:1200px;">
|
<div id="grid2"></div>
|
<div style="float:left;margin-left:20px;"><div><h3>Dirty Items</h3></div><div id="dirty"></div></div>
|
<div id="grid3"></div>
|
</div>
|
<div style="clear:both"><button id="save">Save Changes</button></div>
|
<p>The following buttons switch between stores in the left grid above,
|
to test handling of errors on put operations.</p>
|
<p>Note that clicking Save will NOT emit an error event on the grid,
|
as direct invocations of save are expected to handle the returned promise
|
as they see fit. However, modifying an editor field with autoSave enabled
|
will cause an error event to be emitted, since in this case it is
|
the grid which initiated the operation.</p>
|
<div>
|
<button id="setorigeditstore">Set to original store</button>
|
<button id="setdeferrorputstore">Set to store which rejects Deferred on put</button>
|
</div>
|
<h2>Simple test to show adding/deleting items</h2>
|
<p>(With an OnDemandList alongside, also observing the changes)</p>
|
<div id="gridAddDel"></div>
|
<div id="listAddDel"></div>
|
<div style="clear:both">
|
<button id="add">Add Color</button>
|
<button id="delete">Delete Selected</button>
|
</div>
|
<h2>OnDemandGrid using store with Stateful objects</h2>
|
<div id="statefulGrid"></div>
|
<button type="button" onclick="statefulGrid.save()">Save</button>
|
</body>
|
</html>
|
