How to add a blank/empty row to the EnhancedGrid which is binded to MemoryStore

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/18599497/how-to-add-a-blank-empty-row-to-the-enhancedgrid-which-is-binded-to-memorystore

标签

javascript

dojox.grid.datagrid

dojox.grid

dojo