Search code examples
spring-mvcdojodgriddstore

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


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();
            });

Solution

  • 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.