Add a row in Dojo datagrid

Question

Struggling to find a bit of code to easily understand.

How do you add a row and clear all rows in a Dojo datagrid (version 1.4.2). Lets say the data is 2 columns with customerID and address.

I am using

dojo.data.ItemFileWriteStore

to store values in - but again not quite sure how this should be used.

It can't be that hard.

Cheers.

Answer 1

You can get the data store reference 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 the rows, you can either loop all the items in the data store and use deleteItem() to remove all the items, or use the internal function _clearData() in data grid to remove all the rows, or use setStore() to set a new empty store to the grid. I prefer to use a empty store to reset the grid.

Answer 2

The above answers are correct, but you also need to call save() on the write store to "commit" the change. When you save, a widget using the store (datagrid for example) will refresh itself.

Also, newItem() returns the new item you just created so if you don't want to pass an object to newItem just modify its return value, then save() the store.

Pseudo code:

var i = store.newItem({});

store.setValue(i,"newattribute1","new value");
store.setValue(i,"newattribute2","new value 2");

store.save();

Here is the relevant docs for ItemFileWriteStore which tell 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 blank store to be used with the grid.

Answer 3

I have finish 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: "submit",
        label: "Delete Selected Rows"
    },
    "divDelBtn");

//Connect to onClick event of this buttons the respective actions to add/remove rows.
//where grid is the name of the grid var to handle.
dojo.connect(addBtn, "onClick", function(event) {
        // set the properties for the new item:
        var myNewItem = {
            id: grid.rowCount+1,
            type: "country",
            name: "Fill this country name"
        };
        // Insert the new item into the store:
        // (we use store3 from the example above 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
});