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

[RevealedFrom]

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?

[tabalinas]

Are you sure the updated item is returned by the server script?
What happens if you won't return your $.ajax... call result from updateItem (Meaning just try to remove return)?

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

[maurorulli]

Please try to inspect the args var.
I would like to see the values of args.item and args.previousItem.

[tabalinas]

@RevealedFrom, it depends. If server script returns an item args.item contains it, if server doesn't return anything then it's just updated local item.

Theoretically, there should be no need in doing this (onItemUpdated handling you have), it should just work.

Could you provide a jsfiddle or any other public resource to reproduce the issue?

[SinghKing88]

Hi some times jsGrid store data in cache so you need to get refreched data you can do by doing below changes in ajax URL, if you supply new datetime every time grid will get refreshed data.

change to url: "/api/m/member/"+item.Id + "/" + new Date().getTime(),

[tabalinas]

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

[fnizami]

jsGrid doesn't have any field like selectedRow whereas it has itemIndex which keeps selected row's id hence; you may use like it-
onItemUpdated: function(args) {
args.grid.data[args.itemIndex] = args.item.yourJsonWhichIsContainingUpdatedValues;
$("#table").jsGrid("refresh");
}

And for good practice add below statement inside ajax call.
$.ajax({
type: .....,
url: .......,
data: ......,
contentType: 'application/json',
async: true
});