Jsgrid: Save on change row

[danielson317]

I would like to save the edits when the user selects a different row instead of canceling the edit. Is this possible?

[danielson317]

I went ahead and added this feature myself. It's not pretty but it seems to work. I'll continue testing it.

diff --git a/jsgrid/jsgrid.js b/jsgrid/jsgrid.js
index e03b080..1463dfb 100644
--- a/jsgrid/jsgrid.js
+++ b/jsgrid/jsgrid.js
@@ -63,6 +63,7 @@
         width: "auto",
         height: "auto",
         updateOnResize: true,
+        updateOnRowChange: false,

         rowClass: $.noop,
         rowRenderer: null,
@@ -1051,7 +1052,13 @@
                 return;

             if(this._editingRow) {
-                this.cancelEdit();
+
+                if (this.updateOnRowChange) {
+                    this.updateItem();
+                }
+                else {
+                    this.cancelEdit();
+                }
             }

             var item = $row.data(JSGRID_ROW_DATA_KEY),

[tabalinas]

The easiest way is to define rowClick callback.

The default implementation is:

rowClick: function(args) {
    if(this.editing) {
        this.editItem($(args.event.target).closest("tr"));
    }
}

For your scenario it could be

rowClick: function(args) {
    if(!this._editingRow) {
        this.updateItem();
    }
    if(this.editing) {
        this.editItem($(args.event.target).closest("tr"));
    }
}

Hope it will help.

[danielson317]

That solution was much cleaner. Thank you. I did have to change the polarity of the first 'if' to save if editing instead of save if !editing. I assume that was a typo.

However, when I select another row while editing it saves but doesn't open the new row to edit. It looks like it might open the row to edit but then both edits get canceled at the same time. Any solution to that issue? I'm browsing the code but it's a little beyond my skill level.

[danielson317]

Actually I think I got this figured out. I used the onItemUpdated callback. The system seems to be confused with what is activly being edited. So it start the new edit then the item update ajax returns and stops all edits. So I just delayed the edit until the ajax is finished:

      nextEdit: false,
      rowClick: function(args)
      {
        if (this._editingRow)
        {
          this.updateItem();
          this.nextEdit = args.event.target;
        }
        else if(this.editing)
        {
          this.editItem($(args.event.target).closest("tr"));
        }
      },
      onItemUpdated: function()
      {
        if(this.nextEdit)
        {
          this.editItem($(this.nextEdit).closest("tr"));
          this.nextEdit = false;
        }
      }

All this code was done without editing the jsgrid.js file so props for making a flexible system. Hope this code helps someone in the future.

[tabalinas]

You are right, there was a typo in the code example.
The issue really takes place for async update.
I think the following solution could be even easier:

rowClick: function(args) {
    var $row = $(args.event.target).closest("tr");

    if(this._editingRow) {
        this.updateItem().done($.proxy(function() {
            this.editing && this.editItem($row);
        }, this));
        return;
    }

    this.editing && this.editItem($row);
}

Of course, if you don't like js tricks this.editing && this.editItem(); could be replaced with normal if.
Hope it'll help.

[simplyjt]

I have a related issue. Right now, the insert button cancels all the edits. I want the form to save the edits when I click the insert button and when I switch rows. How can I do that? Thanks.