JSFiddle - React, Tailwind, and code Playground
Dojo 1.6 + Claro template
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/document.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">
<div dojoType="dijit.form.Button" onClick="addRow('grid')">Add</div>
<div id="gridDiv"></div>
CSS
#grid {
width: 85.2em;
height: 50em;
}
JavaScript
// button handle
function addRow(gridId) {
var grid = dijit.byId(gridId);
var map = [{
type: 'dojox.grid.cells.Cell',
dijit: 'dijit.form.TextBox'},
{
type: 'dojox.grid.cells.Bool',
dijit: 'dijit.form.CheckBox'},
{
type: 'dojox.grid.cells.Select',
dijit: 'dijit.form.Select'},
{
type: 'dojox.grid.cells.DateTextBox',
dijit: 'dijit.form.DateTextBox'}
];
var contents = ['<form action="MySubmitUrl" data-dojo-type="dijit.form.Form"><table>'];
dojo.forEach(grid.layout.cells, function(cell, idx) {
var szHtml = cell.formatEditing("", -1);
var dijitType = map.filter(function(e) {
return e.type == cell.declaredClass;
})[0].dijit;
var name = grid.structure[0][idx].field;
var label = grid.structure[0][idx].name;
var elementMod = ' data-dojo-type="' + dijitType + '" id="' + name + '" name="' + name + '" ';
contents.push('<tr><td>');
contents.push('<label for="' + name + '">' + label + ': </label>');
contents.push('</td><td>');
contents.push(szHtml.replace(/^([^\ ]*)/, "$1" + elementMod));
contents.push('</td></tr>');
});
contents.push('</table></form>');
var dialog = new dijit.Dialog({
content: contents.join("")
});
dialog.show();
}
require([
"dojo/_base/declare",
"dijit/Dialog",
"dijit/form/Form",
"dijit/form/Select",
"dijit/form/DateTextBox",
"dijit/form/CheckBox",
"dijit/form/TextBox",
"dijit/form/Button",
"dojox/grid/DataGrid",
"dojo/data/ItemFileWriteStore",
"dojo/parser",
"dojox/grid/cells/_base",
"dojo/domReady!"
], function(declare) {
dojo.parser.parse();
var data = {
identifier: 'id',
items: [
{
id: 1,
col1: "foo",
col2: 'important',
col3: true},
{
id: 2,
col1:...