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!

When do you expect updateItem to be called? updateItem should be called once you save after editing. Do you have an example with published anywhere to see the problem? — tabalin

jdbiochem jdbiochem · Accepted Answer · 2016-11-28T17:50:38

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" }
    ]
});

Why does my jsGrid refuse to update an edited row?

1 Answers