Add row to Dojo datagrid

Question

Fight to find some code that is easy to understand.

How to add a row and clear all rows in a datagrid Dojo (version 1.4.2). Assume that the data is 2 columns with a client identifier and an address.

I use

dojo.data.ItemFileWriteStore 

to store values, but again not quite sure how to use it.

It can't be that hard.

Greetings.

Answer 1

You can get the data store link from the grid using grid.store , then you can use store.newItem() to create a new item in the store. This new item is added as a new row in the grid. For example, store.newItem({customerID : 1, address : "Somewhere"}) .

To clear all rows, you can either encode all the elements in the data store, or use deleteItem() to delete all the elements, or use the _clearData() internal function in the data grid to delete all the lines or use setStore() to set up a new empty store in the net. I prefer to use an empty store in the reset grid.

Answer 2

The above answers are correct, but you also need to call save() in the record store to “commit” the change. When you save, the widget using storage (e.g. datagrid) will update.

In addition, newItem() returns the new element that you just created, so if you do not want to pass the object to newItem , just change its return value, then save() store.

Pseudocode:

 var i = store.newItem({}); store.setValue(i,"newattribute1","new value"); store.setValue(i,"newattribute2","new value 2"); store.save(); 

Here are the relevant docs for ItemFileWriteStore that explains how to use newItem() , setValue() and save() .

Instead of deleteItem you should use setStore(new ItemFileWriteStore()) , but I suspect there is a memory leak when you do this, be careful. This makes a new empty store for use with the net.

Answer 3

I finished one example about this ... the code is here

  // First we create the buttons to add / del rows
 var addBtn = new dijit.form.Button ({
         id: "addBtn",
         type: "submit",
         label: "Add Row"
     },
     "divAddBtn"); // div where the button will load

var delBtn = new dijit.form.Button ({id: "delBtn", type: "send", label: "Delete selected lines"}, "DivDelBtn");

// Connect to the onClick event for these buttons with the appropriate actions to add / remove rows. // where grid is the name of the processed grid var. dojo.connect (addBtn, "onClick", function (event) {// set properties for the new element: var myNewItem = {id: grid.rowCount + 1, type: "country", name: "Fill this country name"} ; // Insert a new item into the store: // (we use store3 from the above example in this example) store.newItem (myNewItem);});

dojo.connect(delBtn, "onClick", function(event) { // Get all selected items from the Grid: var items = grid.selection.getSelected(); if (items.length) { // Iterate through the list of selected items. // The current item is available in the variable // "selectedItem" within the following function: dojo.forEach(items, function(selectedItem) { if (selectedItem !== null) { // Delete the item from the data store: store.deleteItem(selectedItem); } // end if }); // end forEach } // end if });