updated value in grid is not shown at java spring controller

Question

I have a enhanced grid, i want to edit the grid contents and once clicked on Update link, i have to pass newly typed values to the java spring controller where i have logic to save updated values in database. But issue is after i type the value in enhanced grid i need to click somewhere in the grid or make focus on other field so that newly typed value is passed to the spring controller. If i type the new value and the cell is in edit mode and directly click on UPDATE link present in column4 of grid, the old value is passed to the spring controller. Please suggest what changes to be made so that once the mouse is out of the focus of the cell, the newly typed value should save in store and that value should be sent to spring controller when UPDATE link is clicked on column4 of grid.

Please find the fiddle : http://jsfiddle.net/740L0y43/7/

enhanced grid code:

require(['dojo/_base/lang', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore', 'dijit/form/Button', 'dojo/dom', 'dojo/aspect', 'dojo/domReady!'],

function (lang, EnhancedGrid, ItemFileWriteStore, Button, dom, aspect) {
    /*set up data store*/
    var data = {
        identifier: "id",
        items: [{
            id : 1,
            col2 : "aa",
            col3 : "bb",
            col4 : "cC"
         }]
    };

    var store = new ItemFileWriteStore({
        data: data
    });

    /*set up layout*/
    var layout = [
        [{
            'name': 'Column 1',singleClickEdit:'true', editable:'true',
                'field': 'id',
                'width': '100px'
        }, {
            'name': 'Column 2',singleClickEdit:'true', editable:'true',
                'field': 'col2',
                'width': '100px'
        }, {
            'name': 'Column 3',singleClickEdit:'true', editable:'true',
                'field': 'col3',
                'width': '200px'
        }, {
            'name': 'Column 4',formatter: updateDetails,
                'field': 'col4',
                'width': '150px'
        }]
    ];

    /*create a new grid*/
    var grid = new EnhancedGrid({
        id: 'grid',
        store: store,
        structure: layout,
        sortInfo: -1,

    });


    /*append the new grid to the div*/
    grid.placeAt("gridDiv");

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

    aspect.after(grid, 'renderRow', grid.sort);

    var id = 2;

    var button = new Button({
        onClick: function () {
            console.log(arguments);
            store.newItem({
                id: id,
                col2: "col2-" + id,
                col3: "col3-" + id,
                col4: "col4-" + id
            });
            id++;
        }
    }, "addRow");
});

   var updateDetails = function(value, rowIndex) {
        var col2 = this.grid.getItem(rowIndex).col2;
       alert("col2 updated value : " + col2);
     return "<a href=\"<%=request.getContextPath()%>/updateInfo.htm?col2="+col2 +"\">" + "UPDATE";
            };

spring controller code:

    @RequestMapping(value = "/updateInfo", method = RequestMethod.GET)
    public ModelAndView updateInfo(HttpServletRequest request,
        HttpServletResponse response, @ModelAttribute MyDTO myDto,
            @RequestParam("col2") String col2, @RequestParam("col2") String col2){

    System.out.println("col2 value: " + col2);
    System.out.println("col3 value: " + col3);

    //when i type some value in COlumn2/Column3 of enhanced grid and column is still in edit mode then on click of UPDATE , new value is not passed to spring controller, its passing the old value.
...
    ...
    //logic to save in DB


    }

Answer 1

This line:

     return "<a href=\"<%=request.getContextPath()%>/updateInfo.htm?col2="+col2 +"\">" + "UPDATE";

is returning an anchor with the href as "/contextPath/updateInfo.html?col2=aa". That renders it and that's it; that URL is never changing. Then, when you click on UPDATE, it sends what was in there when the page was rendered, not what the current value in your table is.

If you want to have the current value be sent, you should have your href be "#" and have an onclick="updateValue(1)" like this:

<a href="#" onclick="updateValue(1)">UPDATE</a>

where 1 is the row number.

Then, in your update value function, you'd send an ajax request to update the value. Since you're using dojo, check this out: http://dojotoolkit.org/documentation/tutorials/1.8/ajax/

Here's what your function might look like (some pseudo code, some comments to describe behavior):

function updateValue(rowNum){
    //var row = data.items.getRow(rowNum); or something like this
    //Call ajax here and send the new row values
}

Answer 2

After messing with dojo for about an hour, and struggling with dojo's scoping and how to call a function that has access to the data grid and/or it's data store (sorry..I had 0 experience with dojo before this question)...here's your easy way out, OP:

http://jsfiddle.net/hm8gpz6o/

The important parts:

1. EnhancedGrid was NOT re-rendering the formatter generated cell when your data store was updated. This seems like a problem with dojo's EnhancedGrid.

2. I added the following (onApplyCellEdit will fire when a cell is updated):

   /*create a new grid*/
   var grid = new EnhancedGrid({
       id: 'grid',
       store: store,
       structure: layout,
       sortInfo: -1,
       onApplyCellEdit: function(inValue, inRowIndex, inFieldIndex){
           refreshGrid();
       }
   });
   

3. And finally, refreshGrid() will force a re-render of the whole grid. I hate that I have to do this:

   function refreshGrid(){
       grid.startup();   
   }    
   

Please see the fiddle for the full working example.