90 lines
2.2 KiB
HTML
90 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test Cell Editors</title>
|
|
<style>
|
|
@import "../../../../dojo/resources/dojo.css";
|
|
@import "../../../css/dgrid.css";
|
|
@import "../../../../dijit/themes/claro/claro.css";
|
|
@import "../../../css/skins/claro.css";
|
|
</style>
|
|
</head>
|
|
|
|
<body class="claro">
|
|
<h2>OnDemandGrid with editors</h2>
|
|
<div id="grid"></div>
|
|
|
|
<script src="../../../../dojo/dojo.js" data-dojo-config="async: 1"></script>
|
|
|
|
<script>
|
|
var grid,
|
|
gridSaveStack = [],
|
|
ready,
|
|
// Toggled with each grid.save call to signal test module that a save is complete
|
|
saveComplete,
|
|
setEditorToTextBox;
|
|
|
|
require([
|
|
'dojo/_base/declare',
|
|
'dojo/aspect',
|
|
'dgrid/OnDemandGrid',
|
|
'dgrid/Editor',
|
|
'dijit/form/TextBox',
|
|
'dgrid/test/data/createSyncStore'
|
|
], function (declare, aspect, OnDemandGrid, Editor, TextBox, createSyncStore) {
|
|
var store = createSyncStore({ data: [
|
|
{ id: 0, name: '1', description: 'one' },
|
|
{ id: 1, name: '2', description: 'two' },
|
|
{ id: 2, name: '3', description: 'three' }
|
|
]});
|
|
|
|
function createColumnConfig(editorType) {
|
|
return {
|
|
id: 'ID',
|
|
name: {
|
|
label: 'Name',
|
|
editor: editorType || 'text',
|
|
autoSave: true
|
|
},
|
|
description: {
|
|
label: 'Description',
|
|
editor: editorType || 'text',
|
|
editOn: 'click',
|
|
autoSave: true
|
|
}
|
|
};
|
|
}
|
|
|
|
grid = new (declare([OnDemandGrid, Editor]))({
|
|
collection: store,
|
|
columns: createColumnConfig('text')
|
|
}, 'grid');
|
|
|
|
aspect.before(grid, 'save', function () {
|
|
var dirtyRowId;
|
|
|
|
saveComplete = undefined;
|
|
for (dirtyRowId in grid.dirty) {
|
|
// col3 and col4 are the only columns with edit enabled; push the edited value
|
|
// into 'gridSaveStack'
|
|
gridSaveStack.push(grid.dirty[dirtyRowId].name || grid.dirty[dirtyRowId].description);
|
|
}
|
|
});
|
|
|
|
aspect.after(grid, 'save', function (savePromise) {
|
|
savePromise.then(function () {
|
|
saveComplete = true;
|
|
});
|
|
});
|
|
|
|
setEditorToTextBox = function () {
|
|
grid.set('columns', createColumnConfig(TextBox));
|
|
};
|
|
|
|
ready = true;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|