How we can pass dojo EnhancedGrid Store items to spring MVC Controller and save in DB?

Question

My requirement is to do read, update, delete & insert operations of datas from DB using front end as DOJO & Spring MVC.

I am able to fetch the records from db and display in DOJO Enhanced Grid(Editable Grid). On editing the grid data, I don't know how to send the Grid Store Items to my Spring Controller and Update/Insert/Delete in my DB.

Here is the code I have tried to fetch the data from java controller to front end.

Controller Class

@RequestMapping(value="eiaProjectSummary", produces = "application/json")
public @ResponseBody Map<String, Object> getEIAProjectSummary(
    @RequestParam(required = true) String prodGroupId,
    @RequestParam(required = true) List<Integer> eiaValues
    ) {         
    Map<String, Object> returnList = new HashMap<String, Object>();         
    List<PCPTAnalysisBean> pcptList = //getting the list of records from DB.        
    returnList.put("eiaProjSummaryList", pcptList);         
    return returnList;
}  

Javascript

dojo.xhrGet({       
    url: "pcptAnalysis/eiaProjectSummary.json?prodGroupId="+ prodGrpId +"&eiaValues="+eiaValues,
    handleAs: "json",
    preventCache: true,
    load: function(response) {
        var resultsGrid = new dojo.data.ItemFileReadStore({
            data: {
                items:response.eiaProjSummaryList
            }
        });
        grid = new dojox.grid.EnhancedGrid({store: resultsGrid,
            structure: layout,
            selectionMode: "multiple",
            rowSelector: '0px'
        });
    }
});

Similarly, I need to send the edited Grid Store Items from Javascript to My Controller Class. I don't know how to send my Grid Store data from javascript ajax post and how to receive it in my Controller class method. Kindly help me.

Answer 1

Have a look at this working demo, it does a save from a browser Dojo client to a spring MVC backend.

3 JSON Customers are passed in a POST request, simulating the contents of a grid: two elements where in the grid, and one was added.

The 3 elements get sent in the POST request as JSON, and get all saved into a database using JPA. The server returns back a JSON response containing the 3 saved customers or an error - see demo code here

See the demo working:

Installation and running instructions:

git clone https://[email protected]/mydevutils/dojo-spring-mvc-hello-world.git
mvn clean install tomcat7:run-war 

Then open a browser and go to:

http://localhost:8080

The demo needs a Postgres local database to work, which is well worth having locally for development purposes.

@Controller
public class DojoSpringMvcController {


    @Autowired(required =true)
    private CustomerService customerService;

    @RequestMapping(method = RequestMethod.POST  , value = "/hello", produces = {MediaType.APPLICATION_JSON_VALUE})
    @ResponseBody
    public List<Customer> sampleController(@RequestBody List<Customer> customers) {

        for (Customer current : customers) {
            customerService.saveCustomer(current);
        }

        return customers;
    }
}

The client code:

When the 'Send To Server' button is pushed, this code get's executed to send the data:

    var gridData = [{ssn:'0050', lastName: 'Customer1'}, {ssn: '0051', lastName:'Customer2'} ];

    function send() {

      var ssn = document.getElementsByName('ssn')[0].value;
      var lastName = document.getElementsByName('lastName')[0].value;

      var newCustomer = {'ssn': ssn, 'lastName': lastName };

      // add to list of existing customers and do a POST with everything
     gridData.push(newCustomer);

      dojo.xhrPost({
          url: 'http://localhost:8080/dojo-hello-world/hello',
          postData: dojo.toJson(gridData),
          handleAs: "text",
          headers: {
             'Content-Type': 'application/json',
          },
          load: function(response) {
             console.log('Response: ' + response);
             alert('JSON received from server:' + response);
          },
          error: function(error) {
                console.log(error);
                alert('error occurred, check the console!');
          }
      });

    }