Jsgrid: How to refresh grid on row update?

[jhammer2]

First I would like to thank you for your great product and support.

I was wondering if there is an easy way to refresh the grid on update? Currently it just displays whatever value I have entered to the field on update. However, I am modifying the data that it entered before placing it in the database. I would like to have the grid refresh, so that it pulls the final updated dat that I am putting in the database.

I thought that I could add this.refresh() to the _finishUpdate, but that is not doing anything.

[tabalinas]

Thank you for the feedback!

Actually, grid shows entered data on update only if updateItem doesn't return item from the server.
Thus, if your server script will return actually saved item, the grid renders it.

This how it looks in source code:

this._controllerCall("updateItem", updatingItem, function(updatedItem) {
   updatedItem = updatedItem || updatingItem; // here we take item resolving promise of updateItem
   this._finishUpdate($updatingRow, updatedItem, updatingItemIndex);
   ...

[jhammer2]

Ok, so this just needs to return the data similar to how the loadData would return for pageLoading?

On Jun 14, 2015, at 11:24 AM, Artem Tabalin [email protected] wrote:

Thank you for the feedback!

Actually, grid shows entered data on update only if updateItem doesn't return item from the server.
Thus, if your server script will return actually saved item, the grid renders it.

This how it looks in source code:

this._controllerCall("updateItem", updatingItem, function(updatedItem) {
updatedItem = updatedItem || updatingItem; // here we take item resolving promise of updateItem
this._finishUpdate($updatingRow, updatedItem, updatingItemIndex);
...
—
Reply to this email directly or view it on GitHub https://github.com/tabalinas/jsgrid/issues/47#issuecomment-111841039.

[tabalinas]

Yep, but return only updated item (not all items).

updateItem: function(item) {
    var d = $.Deferred();

    $.ajax({
        type: "PUT",
        url: "/items",
        data: item
    }).done(function(updatedItemReturnedFromServer) {
        d.resolve(updatedItemReturnedFromServer); // here we resolve promise with actual item
    });

    return d.promise();
}

Of course, if your script returns updated item you don't have to use this verbose code and just return ajax promise:

updateItem: function(item) {
    return $.ajax({
        type: "PUT",
        url: "/items",
        data: item
    });
}

[jhammer2]

I am not using server side. I am using local storage, when I return the promise, it just gives back a blank row on the screen even though the object has data. Here is what I am using, perhaps I am doing something wrong here?

updateItem: function(updatingClient) {
var db = window.openDatabase("Database", "1.0", "MyDb", 200000);
db.transaction(function(tx) {
var db = window.openDatabase("Database", "1.0", "MyDb", 200000);

                            tx.executeSql(//Update Statement is in here);
                      });

                        var feeds = "";
                        var def = $.Deferred();

                        db.transaction(function(tx) {
                                var db = window.openDatabase("Database", "1.0", "MyDb", 200000);
                                tx.executeSql("SELECT Id,Col1 FROM MyTable where id = "+updatingClient.Id, [], function(tx, results) {
                                          var feedarray = [];
                      var len = 1;
                                          var roaObj =results.rows.item(0);
                                          var jsonString=JSON.stringify(roaObj);
                                          var jsonObj=JSON.parse(jsonString);

                                          feedarray.push(jsonObj);
                                          feeds = {
                                                            data: feedarray,
                                                            itemsCount: len
                                          };
                                          def.resolve(feeds);
                                });
                        });
                    return def.promise();

On Jun 14, 2015, at 11:46 AM, Artem Tabalin [email protected] wrote:

Yep, but return only updated item (not all items).

updateItem: function(item) {
var d = $.Deferred();

$.ajax({
    type: "PUT",
    url: "/items",
    data: item
}).done(function(updatedItemReturnedFromServer) {
    d.resolve(updatedItemReturnedFromServer); // here we resolve promise with actual item
});

return d.promise();

}
Of course, if your script returns updated item you don't have to use verbose code and just return ajax promise:

updateItem: function(item) {
return $.ajax({
type: "PUT",
url: "/items",
data: item
});
}
—
Reply to this email directly or view it on GitHub https://github.com/tabalinas/jsgrid/issues/47#issuecomment-111842154.

[tabalinas]

Frankly, for the grid there is no difference what kind of storage you use. Just resolve promise with actual updated item, as I did in the sample with ajax request.

[jhammer2]

Ok thanks. I'll keep messing with it. It's returning for me, but just giving me a blank line.

On Jun 14, 2015, at 12:12 PM, Artem Tabalin [email protected] wrote:

Frankly, for the grid there is no difference what kind of storage you use. Just resolve promise with actual updated item, as I did in the sample with ajax request.

—
Reply to this email directly or view it on GitHub.

[tabalinas]

Could you show me your updateItem method?

[jhammer2]

updateItem: function(updatingClient) {
var db = window.openDatabase("Database", "1.0", "MyDb", 200000);
db.transaction(function(tx) {
var db = window.openDatabase("Database", "1.0", "MyDb", 200000);

                            tx.executeSql(//Update Statement is in here);
                      });

                        var feeds = "";
                        var def = $.Deferred();

                        db.transaction(function(tx) {
                                var db = window.openDatabase("Database", "1.0", "MyDb", 200000);
                                tx.executeSql("SELECT Id,Col1 FROM MyTable where id = "+updatingClient.Id, [], function(tx, results) {
                                          var feedarray = [];
                      var len = 1;
                                          var roaObj =results.rows.item(0);
                                          var jsonString=JSON.stringify(roaObj);
                                          var jsonObj=JSON.parse(jsonString);

                                          feedarray.push(jsonObj);
                                          feeds = {
                                                          data: feedarray,
                                                          itemsCount: len
                                          };
                                          def.resolve(feeds);
                                });
                        });
                    return def.promise();

On Jun 14, 2015, at 1:30 PM, Artem Tabalin [email protected] wrote:

Could you show me your updateItem method?

—
Reply to this email directly or view it on GitHub.

[tabalinas]

As I wrote "Just resolve promise with actual updated item" (not all data).
def.resolve(feeds); - here you should provide single updated item instead of all feeds.

[jhammer2]

What if all fields get updated? Or multiple fields? Do the fields need passed separately?

On Jun 14, 2015, at 2:19 PM, Artem Tabalin [email protected] wrote:

As I wrote "Just resolve promise with actual updated item" (not all data).
def.resolve(feeds); - here you should provide single updated item.

—
Reply to this email directly or view it on GitHub.

[tabalinas]

So several items are changed on changing of a single row? Interesting...
What if you just reload data then:

$("#jsGrid").jsGrid("loadData");

[jhammer2]

It is several columns on the row that are changing. That is why I was passing the entire changed row back in my update method.

On Jun 15, 2015, at 3:22 AM, Artem Tabalin [email protected] wrote:

So several items are changed on changing of a single row? Interesting...
What if you just reload data then:

$("#jsGrid").jsGrid("loadData");
—
Reply to this email directly or view it on GitHub.

[jhammer2]

I did use the line that you listed below and it does work. to refresh the screen. I think this will work fine for what I am doing. Once again, thanks for the great support.

On Jun 15, 2015, at 3:22 AM, Artem Tabalin [email protected] wrote:

So several items are changed on changing of a single row? Interesting...
What if you just reload data then:

$("#jsGrid").jsGrid("loadData");
—
Reply to this email directly or view it on GitHub https://github.com/tabalinas/jsgrid/issues/47#issuecomment-111964857.

[tabalinas]

You are welcome!

[sanghviyash]

I tried both ways mentioned above, but still getting blank data on the grid, whereas the data is updated in database. I don't want to load the data every time an update takes place. Please help!

[tabalinas]

@sanghviyash, I think it's better to open another issue on StackOverflow or here on GitHub and provide more info about the issue you have, with the grid config.

[ricocsharp]

I'm having the following issue the first time I do an update the grid keeps the previous data if a refresh the entire page it gets the updated value and after that it never happens again untill i restart the app server