javascripthtmlajaxjsgrid

jsgrid controller updateItem not invoked


I'm working on js-grid, when i try to update a column field, the updateitem function of the controller is not invoked, plus the field resets its old value. I'm placing alerts in the function but nothing is called. I'm also calling the onItemUpdating of the jsgrid, but it's not called. Code snippet of my jsgrid:

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

    inserting: true,
    editing: true,
    sorting: true,
    paging: true,
    //width: "auto",
    height: "auto",

    pageSize: 10,

    //data: clients,

    autoload: true,

    onItemUpdating: function(args) {
        alert('grid update');
        previousItem = args.previousItem;
    },

    controller: {
        loadData: function() {
            var d = $.Deferred();

            $.ajax({
                url: "http://192.168.1.141:8080/tickets",
                type : "GET",
                contentType : "application/json; charset=utf-8",
                dataType: "json"
            }).done(function(response) {
                d.resolve(response);
                //d.resolve(response.result);
                //alert(response);
            });

            return d.promise();
        },

        updateItem: function(item) {
            alert('update');
            /*return $.ajax({
                type: "POST",
                url: "http://localhost:8080/save",
                data: item
            });*/

            var d = $.Deferred();

            $.ajax({
                url: "http://192.168.1.141:8080/save",
                type : "POST",
                data: item
            }).done(function(response) {
                alert('success');
                d.resolve(response);
                //d.resolve(response.result);
                //alert(response);
            }).fail(function() {
                alert('fail');
                d.resolve(previousItem);
            });

            return d.promise();
        },
    },


    fields: [
        { name: "id", type: "text", title: "id", width: 90, validate: "required" },
        { name: "name", type: "text", title: "name", width: 150 },
         { name: "crn", type: "text", title: "CRN", width: 200 },
        { name: "age", title: "age", type: "number", width: 50 }




    ]
});

Solution

  • Resolved by adding a control field, updateItem is invoked when the edit button is pressed in the control column:

    $(function() {
    
    $("#jsGrid").jsGrid({
        height: "auto",
        width: "100%",
    
        filtering: true,
        editing: true,
        sorting: true,
        paging: true,
        autoload: true,
    
        onItemUpdating: function(args) {
            previousItem = args.previousItem;
        },
    
        pageSize: 10,
        pageButtonCount: 5,
    
        deleteConfirm: "Do you really want to delete the client?",
    
        controller: {
            loadData: function(filter) {
                console.log(filter);
                var d = $.Deferred();
                $.ajax({
                    url: "http://localhost:8080/tickets",
                    type : "GET",
                    contentType : "application/json; charset=utf-8",
                    dataType: "json"
                }).done(function(response) {
                    d.resolve(response);
                }).fail(function() {
                });
    
                return d.promise();
            },
    
            updateItem: function(item) {
                var d = $.Deferred();
    
                $.ajax({
                    url: "http://localhost:8080/save",
                    type : "POST",
                    data: item
                }).done(function(response) {
                    //alert('success');
                    d.resolve(response);
                }).fail(function() {
                    d.resolve(previousItem);
                });
    
                return d.promise();
            },
        },
    
        fields: [
            { name: "id", type: "text", title: "id", editing: false, width: 90, autosearch: true },
            { name: "name", type: "text", title: "name", editing: false, width: 150, autosearch: true },
             { name: "crn", type: "text", title: "CRN", editing: false, width: 200, autosearch: true },
            { name: "age", title: "age", type: "number", width: 50 },
            { type: "control",deleteButton: false }
        ]
    });
    

    });