How to delete a row in dojo EnhancedGrid using row index not by using selection

Question

Trying to find an answer to remove a row for dojo EnhancedGrid based on the row index.

Please find the EnhancedGrid.

    var dataStore = new ObjectStore({objectStore: objectStoreMemory});
    // grid
    grid = new EnhancedGrid({
    selectable: true,
    store: dataStore,
    structure : [ {
        name : "Country",
        field : "Country",
        width : "150px",
        reorderable: false,
        editable : true
    }, {
        name : "Abbreviation",
        field : "Abbreviation",
        width : "120px",
        reorderable: false,
        editable : true
    }, {
        name : "Capital",
        field : "Capital",
        width : "100%",
        reorderable: false,
        editable : true
    }, {
        label: "", 
        field: "Delete",
        formatter: deleteButton
    }],
    rowSelector: '20px',
    plugins: {
        pagination: {
            pageSizes: ["10", "25", "50", "100"],
            description: true,
            sizeSwitch: true,
            pageStepper: true,
            gotoButton: true,
            maxPageStep: 5,
            position: "bottom"
        }
    }
    }, "grid");
    grid.startup();

And the Delete Button Script is here:

function deleteButton(id) {
    var dBtn1 = "<div data-dojo-type='dijit/form/Button'>";
    var dBtn2 = "<img src='delete.png' onclick='javascript:removeItem()' alt='" + id + "'";
    dBtn = dBtn1 + dBtn2 + " width='18' height='18'></div>";
    return dBtn;
}

Here is my Question: Each row will have a delete button at the end, On click of this button the same row should be deleted.

Can anybody tell me how to delete a row based on row index?

Answer 1

Here is the solution. The sequence of methods that will run onClick of a button are removeItem() and onRowClick event

1> Set the "deleteButtonFlag" on click of a button.

function removeItem() {
        deleteButtonGFlag = true;
}

2> Remove item

dojo.connect(grid, "onRowClick", function(e) {
    if (deleteButtonGFlag) {
        dataStore.fetch({
            query: {},
            onComplete: function(items) {
                var item = items[e.rowIndex];
                dataStore.deleteItem(item);
                dataStore.save();
                deleteButtonGFlag = false;
            }
        });
    }
});

Answer 2

If you want to add (remove) data programmatically, you just have to add (remove) it from the underlying data store. Since DataGrid is “DataStoreAware”, changes made to the store will be reflected automatically in the DataGrid.

https://dojotoolkit.org/reference-guide/1.10/dojox/grid/example_Adding_and_deleting_data.html

dojox/grid has a property selection and method getSelected() to get selected items. In example from documentation it's implemented in following way:

        var items = grid5.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:
                    store3.deleteItem(selectedItem);
                } // end if
            }); // end forEach
        } // end if

Hope it will help.