<!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>Grid with editors</h2>
|
<div id="grid"></div>
|
|
<script src="../../../../dojo/dojo.js" data-dojo-config="async: 1"></script>
|
|
<script>
|
var grid,
|
data = [
|
{ id: 0, name: '1', description: 'one' },
|
{ id: 1, name: '2', description: 'two' },
|
{ id: 2, name: '3', description: 'three' }
|
],
|
datachangeStack = [],
|
ready = false,
|
setEditorToTextBox,
|
setEditorToValidationTextBox;
|
|
require([
|
'dojo/_base/declare',
|
'dgrid/Grid',
|
'dgrid/Editor',
|
'dijit/form/TextBox',
|
'dijit/form/ValidationTextBox'
|
], function (declare, Grid, Editor, TextBox, ValidationTextBox) {
|
function createColumnConfig(editorType) {
|
return {
|
id: 'ID',
|
name: {
|
label: 'Name',
|
editor: editorType || 'text'
|
},
|
description: {
|
label: 'Description',
|
editor: editorType || 'text',
|
editOn: 'click'
|
}
|
};
|
}
|
|
grid = new (declare([Grid, Editor]))({
|
columns: createColumnConfig('text')
|
}, 'grid');
|
|
grid.renderArray(data);
|
|
// Push values received by the "dgrid-datachange" event into a global stack.
|
// The functional test can read from this stack to verify the values it is
|
// inputting are being emitted by the "dgrid-datachange" event.
|
grid.on('dgrid-datachange', function (event) {
|
datachangeStack.push(event.value);
|
});
|
|
setEditorToTextBox = function () {
|
grid.set('columns', createColumnConfig(TextBox));
|
};
|
|
setEditorToValidationTextBox = function () {
|
var columns = createColumnConfig(ValidationTextBox);
|
|
columns.description.editorArgs = {
|
required: true
|
};
|
grid.set('columns', columns);
|
};
|
|
ready = true;
|
});
|
</script>
|
</body>
|
</html>
|
