How to add a blank/empty row to the EnhancedGrid w

I am using MemoryStore, Observable and ObjectStore to bind the data to EnhancedGrid. But when add a row to EnhancedGrid, the newly added row cells are shown with (...). When i try to edit the cell, it displays undefined and ended with an exception.

Javascript:

require(['dojo/_base/lang', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore', 'dijit/form/Button', 'dojo/dom', 'dojo/domReady!', 'dojo/store/Memory', 'dojo/store/Observable', 'dojo/data/ObjectStore'],

function (lang, EnhancedGrid, ItemFileWriteStore, Button, dom, domReady, Memory, Observable, ObjectStore) {
    /*set up data store*/
    var data = {
        identifier: "id",
        items: []
    };


var gridMemStore = new Memory({ data: data });
var gridDataStore = Observable(gridMemStore);
var store = new ObjectStore({ objectStore: gridDataStore });


/*set up layout*/
var layout = [
    [{
        'name': 'Column 1',
            'field': 'id',
            'width': '100px'
    }, {
        'name': 'Column 2',
            'field': 'col2',
            'width': '100px',
            editable: true
    }, {
        'name': 'Column 3',
            'field': 'col3',
            'width': '200px',
            editable: true
    }, {
        'name': 'Column 4',
            'field': 'col4',
            'width': '150px'
    }]
];

/*create a new grid*/
var grid = new EnhancedGrid({
    id: 'grid',
    store: store,
    items: data.items,
    structure: layout,
    rowSelector: '20px'
});

/*append the new grid to the div*/
grid.placeAt("gridDiv");

/*Call startup() to render the grid*/
grid.startup();

var id = 0;

var button = new Button({
    onClick: function () {
        console.log(arguments);
        grid.store.newItem({
            id: id
        });
        id++;
    }
}, "addRow");
});

HTML:

<body class="claro">
    <div id="gridDiv"></div>
    <button id="addRow" data-dojo-type="dijit.form.Button">Add Row</button>
</body>

Please help me. What is missing in this code?

How to add an empty row irrespective of the column datatype?

In you posted code you need to remove the items argument in the dataGrid constructor for the example to work. Here is a possible solution:

To remove the ... in the cells use a custom formatter for the each field, to avoid the undefined, use the get function. Documentation http://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html

   /*set up layout*/
                        var layout = [
                            [{
                                    'name': 'Column 1',
                                    'field': 'id',
                                    'width': '100px'
                                }, {
                                    'name': 'Column 2',
                                    'field': 'col2',
                                    'width': '100px',
                                    editable: true,
                                    formatter: function (item) {
                                        return '';
                                    },
                                    get: function (rowIdx, item) {
                                        return '';
                                    }
                                }, {
                                    'name': 'Column 3',
                                    'field': 'col3',
                                    'width': '200px',
                                    editable: true,
                                    formatter: function (item) {
                                        return '';
                                    },
                                    get: function (rowIdx, item) {
                                        return '';
                                    }
                                }, {
                                    'name': 'Column 4',
                                    'field': 'col4',
                                    'width': '150px'
                                }]
                        ];