javascript - How to add a blank/empty row to the EnhancedGrid which is binded to MemoryStore -
i using memorystore, observable , objectstore bind data enhancedgrid. when add row enhancedgrid, newly added row cells shown (...). when try edit cell, displays undefined , ended 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 data store*/ var data = { identifier: "id", items: [] }; var gridmemstore = new memory({ data: data }); var griddatastore = observable(gridmemstore); var store = new objectstore({ objectstore: griddatastore }); /*set 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 new grid*/ var grid = new enhancedgrid({ id: 'grid', store: store, items: data.items, structure: layout, rowselector: '20px' }); /*append new grid div*/ grid.placeat("griddiv"); /*call startup() render 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 me. missing in code?
how add empty row irrespective of column datatype?
in posted code need remove items argument in datagrid constructor example work. here possible solution:
to remove ... in cells use custom formatter each field, avoid undefined, use function. documentation http://dojotoolkit.org/reference-guide/1.10/dojox/grid/datagrid.html
/*set 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' }] ];
Comments
Post a Comment