Create a Dojo grid and Add Dialog from Data Model

Question

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 also need to add records, so there has to be an Add Dialog for each table.

Is there a way/module that generates a Dojo grid and an Add Dialog given only the data structure of the model? Sort of like the structure parameter of dojox.grid, so that both the grid and the add Dialog have the same data types, default values, contraints etc. Of course I could write a custom widget that would just do that but I am looking for something existing here.

Answer 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:

    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'}
             ];

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.

function addContents(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)