Create A Dojo Grid And Add Dialog From Data Model

I am developing an app where users can perform CRUD operations on multiple data models (aka. DB tables). I am using Dojo and I am quite happy with the dojox.grid module. But users

Solution 1:

The answer is, no there is no such module. You'd need to build a derived dialog.

Lets see whats needed;

1. The current grid
2. the grid layout (celltypes)
3. names and labels (structure)

Assuming there is one 'Add contents' button defined pr-grid and that this button 'knows' the ID of the said grid, its onClick function should fire up a form in dialog.

While there are dijit.form Widgets there's also a range of predefined cellTypes, residing under dojox/grid/cells/_base.js. Lets make a map where type and widget is 1to1:

varmap = [{
        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'}
             ];

In our addContents function we will make use of the 'editable' functionality in the dojox.grid.DataGrid. When we know there's a such - there is certainly also a function pr-cell that generates the DOM. This is the formatEditing function which is present in any cellType.

// for instance
  dojox.grid.cells.Select.prototype.formatEditing( /* value */"", /* row */ -1);

Only thing thats needed is to construct the contents which should be shown in the dialog - following uses the above mentioned functionality and provides dijit suitable markup for presentation in a dijit.Dialog.

functionaddContents(gridId) {
    var grid = dijit.byId(gridId);
    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();
}

The contents is easy style-able and should also supply a submit/cancel button but im certain you get the idea. Running sample

Let me know how it runs (havent tested combobox / datetime types)