DOJO: how to send/delete selected rows from grid to the springMVC controller

Question

I am using dgrid/Grid for displaying data into grid. I want to add/delete selected rows from the grid and update the database. How can I do that? Any help would be appreciated.

 require([ 'dojo/_base/declare', 'dstore/RequestMemory', 'dgrid/Grid',
            'dgrid/extensions/Pagination', 'dgrid/Selection' ],
            function(declare, RequestMemory, Grid, Pagination, Selection,
                    Dialog, Button) {
                var structure = [ {
                    label : "Value Date",
                    field : "valueDate"
                }, {
                    label : "Currency",
                    field : "currency"
                }];
 var grid = new (declare([ Grid, Pagination, Selection ]))({
                    collection : new RequestMemory({
                        target : 'getdata'
                    }),
                    columns : structure,
                    className : 'dgrid-autoheight',
                    loadingMessage : 'Loading data...',
                    noDataMessage : 'No results found.',
                }, 'grid');
               grid.startup();
            });

Answer 1

Use this : -

require([
                "dojox.grid.EnhancedGrid",
                "dojox.grid.enhanced.plugins.Pagination",
                "dojo.data.ItemFileWriteStore",
                    "dojo/store/JsonRest",
                    'dojo/_base/array',
                    "dojo/store/Memory",
                    "dojo/store/Cache",
                    "dojox/grid/DataGrid",
                    "dojo/data/ObjectStore",
                    "dojo/request",
                    "dojo/query",
                    "dojo/domReady!",
                    "dojox/grid/_CheckBoxSelector"
                ], function(EnhancedGrid,Pagination,ItemFileWriteStore,JsonRest,array, Memory, Cache, DataGrid, ObjectStore,request, query){
                var myStore, grid;
                request.get("example.json", {
                    handleAs: "json"
                }).then(function(data){
                    var dataLength=data.object.length;
                    var arrayData=data.object;
                    console.log(data.object.length);
                        var data = {
                          identifier: 'id',
                          items: []
                        };
                        var data_list = arrayData;
                        var rows = dataLength;
                        for(var i=0, l=data_list.length; i<rows; i++){
                          data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
                        }
                        var store = new dojo.data.ItemFileWriteStore({data: data});

                        /*set up layout*/
                        var layout =[ {
                                label : "Value Date",
                                field : "valueDate"
                            }, {
                                label : "Currency",
                                field : "currency"
                            }];

                        /*create a new grid:*/
                        var grid = new dojox.grid.EnhancedGrid({
                            id: 'grid',
                            store: store,
                            structure: layout,
                            rowSelector: '20px',
                            plugins: {
                              pagination: {
                                  pageSizes: ["25", "50", "100", "All"],
                                  description: true,
                                  sizeSwitch: true,
                                  pageStepper: true,
                                  gotoButton: true,
                                          /*page step to be displayed*/
                                  maxPageStep: 4,
                                          /*position of the pagination bar*/
                                  position: "bottom"
                              }
                            }
                        }, document.createElement('div'));

                        /*append the new grid to the div*/
                        dojo.byId("gridDiv").appendChild(grid.domNode);

                        /*Call startup() to render the grid*/
                        grid.startup();

                        query("#delete_c").on("click", function(){
                        var select_row = grid.selection.getSelected();
                        var array_data=[];
                        array.forEach(select_row, function(selectedItem){
                            if(selectedItem !== null){
                            /* Delete the item from the data store: */
                            store.deleteItem(selectedItem);
                            array_data.push(selectedItem);
                            } /* end if */
                        });
                        console.log(array_data);
                         dojo.xhrDelete({
                            url :"delete_row",
                            postData: dojo.toJson(array_data),
                            handleAs: "json",
                            headers: { "Content-Type": "application/json"},
                            load: function(response, ioArgs){
                            console.log(response);
                            if(response.status=="SUCCESS"){
                                continueDialog.onCancel();
                            }
                            }
                         });
                    });

              });
        });

Use same delete function for add and update after change method.

Answer 2

You can get the selected rows data with something like that:

function getSelectedRowsData(grid) {
    var rowsData = [];
    for (var id in grid.selection) {
        if (grid.selection[id]) {
            rowsData.push(grid.row(id).data);
            }
    }
    return rowsData;
}

After getting the selected rows data, you can send any request that you want to the server using the Dojo XHR component ('dojo/_request/xhr'). The request will return you a Promise that contains the response. After that, you can just refresh the grid or emit an event to the store to update the values.

The delete request to the server should be something like this, assuming you're expection a JSON on the server-side:

function (targetUrl, data, grid) {
    xhr.delete(targetUrl, {
        headers: {
        'Content-Type': 'application/json'
        },
        data : JSON.stringify(alert)
    }).then(function (result) {
        // do something with the result
        grid.refresh();
    }).otherwise(function (err) {
        // if an error occurs, treat here
    })
}