JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<script src="http://amd.egoworx.com/jsfiddle-dojo-require.js"></script>
<body class="claro">
<div id="pane" style="width: 600px; height: 450px;" data-dojo-type="dijit/layout/ContentPane"></div>
</body>
CSS
html, body {
height: 100%;
}
body {
font-family: sans-serif;
font-size: 11px;
}
/*.grid {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
}*/
JavaScript
require(["dojo/_base/declare",
"dojo/on",
"dojo/aspect",
"dojo/_base/lang",
"dojo/store/Observable",
"dojo/store/Memory",
"dijit/registry",
"dijit/form/Button",
"dgrid/OnDemandGrid",
"dgrid/editor",
"dgrid/extensions/DijitRegistry",
"put-selector/put",
"dojo/ready",
"dojo/domReady!"], function (declare, on, aspect, lang, Observable, Memory, registry, Button, Grid, editor, DijitRegistry, put, ready) {
var MyGrid = declare(null, {
constructor: function (divId, pane) {
var myStore = new Observable(new Memory());
// adding items to memoryStore
for (var i = 0; i < 10; i++) {
myStore.add({
id: i,
name: divId + " - " + i
});
}
var getColumns = lang.hitch(this, function () {
var that = this;
return {
id: {
label: "ID"
},
name: editor({
label: "Name"
}, "text", "dblclick"),
_item: {
label: "Row action",
renderCell: function (object, data, td) {
var btnReset = new Button({
label: "reset",
onClick: function (evt) {
var dirty = that.grid.dirty,
id = object.id;
if (dirty.hasOwnProperty(id)) {
delete dirty[id]; // delete dirty data
myStore.notify(object, object.id);
}
}
}, td.appendChild(put("div")));
//btnReset._destroyOnRemove =...