Updated item is not refreshed in the grid, even though it is returned from the server

I am following the recommendation in #47.

Instead of using inline editing, I use a bootstrap modal dialog to let the user edit in a details view. When the details view is accepted and closed, I called $("#table").jsGrid("updateItem", updatedRow).

The updated item is fired through the server and is returned from the server. I can confirm it in the Http response and also in the onItemUpdated event. However, the grid stubbornly refuses to show the updated values.

My code is:

     $("#table").jsGrid({
        width: "100%",
        height: "auto",
 
        editing: true,
        autoload: true,
 
        rowClick: function(args) {
           //...populate dialog with data of selected row
           $("#detailsDialog").modal();  //opens details view
        },

        controller: {
         updateItem: function(item) {
                        return $.ajax({
                         type: "PUT",
                         url: "/api/m/member/"+item.Id,
                         data: item,
                         success: function(result) {
                            popupInfo("Success","Member information updated");
                         },
                         error: function(err) {
                            popupError(err, "Error updating family member");
                         }
                        });
         } 
        },

        data: [{.... initial data injected here by server Jade script ... }],

        onItemUpdated: function(args) {
            console.log(args.item);
        },
 
        fields: [
            { name: "DisplayName", type: "text", width: 90, align: "left", title: "Name"},
            { name: "NativeName", type: "text", width: 50, title: "Native Name" },
            { name: "Phone", type: "text", width: 100, title: "Mobile" },
            { name: "Email", type: "text", width: 100, css: "min-width:150px", title: "Email" }
          ]

     });

As a test to illustrate, I completely updated all the four fields of interest to A, B, C and D. The http response, as seen from Chrome’s Developer Tools is:

{"Id":346,"FamilyID":854,"Phone":"C","Email":"D","DisplayName":"A","LastUpdatedOn":"2017-04-28T15:50:00.000Z","LastUpdatedBy":42,"isDeleted":false,"NativeName":"B","Roles":0}

Similarly the console log as captured from the onItemUpdated event showed the same values.

I checked and checked for typos but could not find anything wrong. Is there any reason why the grid may not be updated? Must any of the other jsGrid options be set to certain values for the refresh to happen?

If I were to work around by manually refreshing the row from onItemUpdated, how do I reference that edited row?

[RevealedFrom]

I am certain that the updated item is returned by the server as a single Json object. The example shown above was as observed in the Http pipe to the browser.

Removing the return doesn’t work. I managed to achieve what I want by saving the row that was clicked in selectedRow and the following:

        onItemUpdated: function(args) {
            args.grid.data[selectedRow] = args.item;
            $("#table").jsGrid("refresh");
        },

Does args.item come from the server or is it from locally?

Even though my goal is achieved, I would like to get to the bottom of things. Do you have any suggestions where in the jsGrid code I should be looking at?

Thanks for the great piece of work.

[tabalinas]

@SinghKing88, jsGrid doesn’t cache data. Most probably this is browser cache.