Why does my jsGrid refuse to update an edited row?

Question

I know there are alternatives, but I really want to use jsGrid in my project. I am using the 1.5.2 version as indicated on their website, and pulling it from CDN. All I want is for the update to be called as described, so that I can do a $.ajax, but it seems like that callback doesn't do anything. Here is my implementation:

$(function() {
        $("#jsGrid").jsGrid({
            width: "100%",
            height: "600px",

            inserting: false,
            editing: true,
            sorting: true,
            paging: false,
            autoload: true,

            controller: {
                loadData: function(filter) {
                    return $.ajax({
                        type: "GET",
                        url: "@Url.Action("getOptions", New With {.communityID = 1})",
                        data: filter
                    });
                },

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

            ...
        });
    })

• It says in the documentation that the controller methods are expected to return Promises. That's alright, as I'm using jQuery 3.0, and $.ajax returns a now-standardized Javascript Promise/A (which is what jsGrid expects).

• I know the controller object is being properly understood because it calls loadData(), and populates with beautiful rows from my REST service.

• After looking at many other examples, it seems like everyone gets it to work with the very simple code provided in the documentation. My console.log never gets hit on a breakpoint, and the AJAX call never happens in the network tab.

• I switched to the non-minified version of jsgrid.js, and I never get any console errors.

• When I blur a row (move away from a row I am editing) the value goes back to what it initially was.

Maybe I just don't understand how it works? To persist edits to my DB, should I be looking for a different event? Any help would be very much appreciated!

Answer 1

Answer here in case anyone searches this.

I expected the updateItem event to be fired when a field was edited and then blurred. This is not the case -- you MUST include a "control" field which by default will give you a save button. This was just fine for my purposes.

$("#jsGrid").jsGrid({
    .
    .           
    fields: [
        .
        .
        { type: "control" }
    ]
});