removing items from a dojo datagrid

Question

I am struggling with a simple dojo datagrid in my Zend Framework project.

I have a list of data from a mysql table that I can display, however I want users to be able to remove selected rows (and remove them from the db). I am using the example from Dojo DataGrid adding and deleting data. My code in my view for the datagrid looks like this.

<div dojoType="dojo.data.ItemFileReadStore" jsId="skillstore" url="<?php echo $this->baseUrl()?>/skills/hist/<?php echo $this->histid;?>"></div>

<table id="skillgrid" jsId="skills" dojoType="dojox.grid.DataGrid" store="skillstore"   style="height:300px;width:500px;">
 <thead>
    <tr>
        <th field="skillid" hidden="true"></th>
        <th width="auto" field="skill">Skills</th>
    </tr>

</thead>
</table>
<div>
<button dojoType="dijit.form.Button" onclick="removeRows()" >Remove Selected Row</button>
<button dojoType="dijit.form.Button" onclick="addRow()">Add another skill</button>
</div>

I've placed the code for the removing of the rows inbetween the view scripts captureStart and captureEnd tags. The code for the removeRows() looks like this.

function removeRows(e){     
    var items = skillsgrid.selection.getSelected();

    if(items.length){

        dojo.forEach(items, function(selectedItem){

            if(selectedItem !== null){

                skillstore.deleteItem(selectedItem);
            }//endif
        });//end foreach

    }//end if
}

The main problem I get is that when I select a row and click the button, firebugs complains that skillstore.deleteItem is not a function. I have yet to try and remove the entry from the database.

Any pointers would be much appreciated.

Answer 1

I think all you have to do is use the jsId attribute value as ID instead of the id one:

var items = skills.selection.getSelected();

EDIT:

If that doesn't work, did you add the following right after the closing body tag?

<script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dijit.form.Button");
</script>

EDIT2:

Actually, you are using a read-only store, that is the problem.

Answer 2

These would I do.

declaring dojo.require("dojo.data.ItemFileWriteStore"); is a must. That's why firebugs complains that skillstore.deleteItem is not a function' because there is no 'deleteItem' in ItemFileReadStore but is found in 'ItemFileWriteStore'.

function removeRows(e){         
        var items = skillsgrid.selection.getSelected();
        if(items.length){
                dojo.forEach(items, function(selectedItem){
                      skillsgrid.store.deleteItem(selectedItem); 
                      skillsgrid.sort(); // I did access the store of the grid directly.
                });//end foreach

        }//end if
}