Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

81 lines (76 sloc) 2.92 kb
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<title>Test Dijit Cell Editors</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=570" />
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "../../dijit/themes/claro/claro.css";
@import "../css/skins/claro.css";
.heading {
font-weight: bold;
padding-bottom: 0.25em;
#grid .field-date, #grid .field-date2 {
width: 16em;
#grid .field-integer {
width: 6em;
#grid .field-bool {
width: 6em;
margin: 10px;
<script type="text/javascript" src="../../dojo/dojo.js"
data-dojo-config="async: true, isDebug: true"></script>
<script type="text/javascript">
require(["dgrid/List", "dgrid/OnDemandGrid", "dgrid/Selection", "dgrid/Keyboard", "dgrid/editor", "dijit/form/DateTextBox", "dijit/form/HorizontalSlider", "dijit/form/NumberSpinner", "dojo/_base/declare", "dgrid/test/data/base", "dojo/domReady!"],
function(List, Grid, Selection, Keyboard, editor, DateTextBox, Slider, NumberSpinner, declare){
var columns = [
editor({label: 'A Date', field: 'date'}, DateTextBox),
editor({label: 'Real Number', field: 'floatNum'}, Slider),
editor({label: 'Integer', field: 'integer',
editorArgs: {style: 'width: 5em;', constraints: {min:0, max:1550, places:0}}},
editor({label: 'Text editable if checkbox checked + saved', field: 'text', canEdit: function(object){
return object.bool;
}}, "text", "dblclick"),
{label: 'Non-editable text', field: 'text2', sortable: false},
editor({label: 'Another Date', field: 'date2'}, DateTextBox, "dgrid-cellfocusin"),
editor({label: 'CheckBox', field: 'bool'}, "checkbox")
window.grid = new (declare([Grid, Selection, Keyboard]))({
store: testTypesStore,
columns: columns,
selectionMode: "single"
}, "grid");
grid.on("dgrid-datachange", function(evt){
console.log("data changed: ", evt.oldValue, " -> ", evt.value);
console.log("cell: ", evt.cell,;
grid.on(".field-integer:dgrid-datachange", function(evt){
if(evt.value > 1000){
alert("Values above 1000 will be rejected");
// log data on a timeout to demonstrate that value wasn't changed
console.log("integer after prevented event:",;
}, 0);
<body class="claro">
<h2>A basic grid with editors</h2>
(This test requires dijit to be installed)
<div id="grid"></div>
<button type="button" id="save" onclick="">Save</button>
Jump to Line
Something went wrong with that request. Please try again.