Dojo-输入字段未追加到网格

Question

I Created a grid using dojo.I 'm having a form with input fields while i entered the values and click the "Add Row" button the input fields are not appending to the grid. Delete Option is working fine but add row is not working. I have attached the link of jsfiddle kindly refer for more.

form = new Form({
    onSubmit: function(evt) {
        evt.preventDefault();
        var formValue = this.get("value");
        dataStore.newItem(formValue);
    }
}, "formContainer");
form.startup();
});

jsfiddle

Answer 1

There are some problems with your HTML code. There is no need for the form element. You just need a div and place your dijit.form.Form in the div element. And, the submit button needs to be inside that div . It will automatically get triggered.

See the updated fiddle: JSFiddle

There is one more thing, to add data to the store, you have to provide an id to the newItem . Store will not accept an element without an id.

Answer 2

Fully agree with @Himanshu.
You HTML is strange.
If you want to use a submit button, you must put it inside the <form> element.

Also, still like @Himanshu said, you must provide an id in order to user newItem
See the following working jsfiddle example: https://jsfiddle.net/xzkc7hbs/8/

For better records, here is a working snippets. (ignore the script error, those are security warnings, and run it in full page. Otherwise the script errors are over the textboxes)

 require([ 'dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dijit/form/Button', 'dojo/dom-class', "dojo/dom-construct", "dojo/on", "dijit/form/Form", "dijit/form/TextBox", "dojo/store/Memory", "dojo/data/ObjectStore", "dojo/request", "dijit/registry", 'dojo/domReady!', 'dojox/grid/_CheckBoxSelector' ], function(lang, DataGrid, ItemFileWriteStore, dom, Button, domClass, domConstruct, on, Form, TextBox, Memory, ObjectStore, request, registry) { var data = { identifier: 'id', items: [] }; var data_list = [{ fname: "Boy", lname: "Mayer", email: "boy@mayer.com", num: 54526 }, { fname: "Paul", lname: "Taucker", email: "paul@taucker.com", num: 12345 }, { fname: "Steven", lname: "Spil", email: "steven@spil.com", num: 87654 }, { fname: "computer", lname: "Tech", email: "comp@tech.com", num: 45158 }, { fname: "User", lname: "Interface", email: "user@inter.in", num: 94979 }]; var rows = data_list.length; for (i = 0, l = rows; i < rows; i++) { data.items.push(lang.mixin({ id: i + 1 }, data_list[i % l])); } var dataStore = new dojo.data.ItemFileWriteStore({ data: data }); var layout = [{ type: "dojox.grid._CheckBoxSelector", width: '30px' }, [{ 'name': 'Sl', 'field': 'id', 'width': '20px', 'editable': 'false' }, { 'name': 'Firstname', 'field': 'fname', 'width': '140px', 'editable': 'true' }, { 'name': 'Lastname', 'field': 'lname', 'width': '130px', 'editable': 'true' }, { 'name': 'Email', 'field': 'email', 'width': '140px', 'editable': 'true' }, { 'name': 'Number', 'field': 'num', 'width': '80px', 'editable': 'true' }] ]; var grid = new DataGrid({ store: dataStore, query: { id: "*" }, queryOptions: {}, structure: layout }); grid.placeAt("gridDiv"); grid.startup(); var button = new Button({ label: "Add Row", }, "addRow"); button.startup(); var button = new Button({ label: "Delete", }, "deleteBtn"); button.startup(); dojo.connect(deleteBtn, "onclick", function() { var items = grid.selection.getSelected(); if (items.length) { dojo.forEach(items, function(selectedItem) { if (selectedItem !== null) { dataStore.deleteItem(selectedItem); } }); } }); var form = new Form({ onSubmit: function(evt) { evt.preventDefault(); var formValue = form.get("value"); console.debug(formValue); dataStore.fetch({ onComplete: function(allItems) { var newId = allItems.length + 1; dataStore.newItem({ id: newId, fname: formValue.first, lname: formValue.last, email: formValue.dob, num: formValue.mobile }); } }) } }, "myForm"); form.startup(); }); 

 *, th { font: 14px'verdana', sans-serif; } td { font: 13px'verdana', sans-serif; } #gridDiv { height: 14em; margin-bottom: 15px; width: 42em; } 

 <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/claroGrid.css"> <div class="claro"> <div id="gridDiv"></div> <button id="deleteBtn"></button> <form id="myForm"> <div id="formContainer"> <input type="text" id="first" name="first" data-dojo-type="dijit/form/TextBox" value="" placeholder="Firstname" required/> <input type="text" id="last" name="last" data-dojo-type="dijit/form/TextBox" value="" placeholder="Lastname" required /> <input type="text" id="email" name="dob" data-dojo-type="dijit/form/TextBox" value="" placeholder="Email" required /> <input type="text" id="mobile" name="mobile" data-dojo-type="dijit/form/TextBox" value="" placeholder="Mobile Number" required /> </div> <button type="submit" value="submit" data-dojo-type="dijit/form/Button" id="submitForm">Add Row</button> </form> </div>