<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Dijit Cell Editors with autoSave</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";
|
.heading {
|
font-weight: bold;
|
padding-bottom: 0.25em;
|
}
|
.dgrid {
|
margin: 10px;
|
}
|
</style>
|
<script src="../../dojo/dojo.js"
|
data-dojo-config="async: true, isDebug: true"></script>
|
<script>
|
require(["dojo/_base/declare", "dojo/_base/array", "dgrid/List", "dgrid/OnDemandGrid", "dgrid/Keyboard",
|
"dgrid/Editor", "dijit/form/CheckBox", "dijit/form/DateTextBox",
|
"dijit/form/HorizontalSlider", "dijit/form/NumberSpinner",
|
"dgrid/test/data/createSyncStore", "dgrid/test/data/typesData", "dojo/domReady!"
|
], function(
|
declare, arrayUtil, List, Grid, Keyboard, Editor,
|
CheckBox, DateTextBox, Slider, NumberSpinner, createSyncStore, typesData
|
){
|
var testTypesStore = createSyncStore({ data: typesData });
|
var getColumns = window.getColumns = function(editOn){
|
return arrayUtil.map([
|
{ label: "Date", field: "date", editor: DateTextBox },
|
{ label: "Slider", field: "floatNum", editor: Slider },
|
{ label: "Number", field: "integer", editor: NumberSpinner },
|
{ label: "Checkbox Widget", field: "bool", editor: CheckBox },
|
{ label: "Text", field: "text", editor: "text" },
|
{ label: "Radio", field: "radio", editor: "radio" },
|
{ label: "Checkbox", field: "bool", editor: "checkbox" }
|
], function (column) {
|
column.autoSave = true;
|
if(editOn){
|
column.editOn = editOn;
|
}
|
return column;
|
});
|
}
|
|
window.grid = new (declare([Grid, Keyboard, Editor]))({
|
collection: testTypesStore,
|
columns: getColumns()
|
}, "grid");
|
|
grid.on("dgrid-datachange", function(evt){
|
console.log("data changed: ", evt.oldValue, " -> ", evt.value);
|
console.log("cell: ", evt.cell.row.id, evt.cell.column.field);
|
});
|
grid.on("dgrid-editor-show", function(evt){
|
console.log("show editOn editor: ", evt);
|
});
|
grid.on("dgrid-editor-hide", function(evt){
|
console.log("hide editOn editor: ", evt);
|
});
|
});
|
|
</script>
|
</head>
|
<body class="claro">
|
<h2>A grid with autoSave-enabled editors</h2>
|
(This test requires dijit to be installed)
|
<div id="grid"></div>
|
Editor type:
|
<button type="button" onclick="grid.set('columns', getColumns());">always-on</button>
|
<button type="button" onclick="grid.set('columns', getColumns('dblclick'));">on dblclick</button>
|
</body>
|
</html>
|
