Btukfyl

I am using js-grid for performing inline edits. I am using the callbacks onItemInserting, onItemUpdating andonItemDeleting to make AJAX calls to perform server-side INSERT, UPDATE and DELETE operations respectively. However the issue is the client side updates to grid are happening before callbacks of the AJAX calls are executed. As a result, client side updates are taking place irrespective of server-side operation result.

Here is partial code of my application:

   function displayConfigTable(config) {



        let parameters = {

            configName: config

        };



    $.getJSON("/configure", parameters, function(data, textStatus, jqXHR) {



       displayGrid(config, data);

    });



   }



   function onUpdateCallback({

    grid,                // grid instance

    row,                 // updating row jQuery element

    item,                // updating item

    itemIndex,           // updating item index

    previousItem,        // shallow copy (not deep copy) of item before editing

}) {

    //TODO:



}





function onDeleteCallback({

    grid,                // grid instance

    row,                 // deleting row jQuery element

    item,                // deleting item

    itemIndex,           // deleting item index

}) {

    //TODO:



}



function onInsertCallback({grid,item}) {

    var config = grid.configName;



    var data = {

        configName: grid.configName,

        item: item

    };



    $.ajax({

        type: 'POST',

        contentType: 'application/json',

        url: '/updateConfig',

        dataType : 'json',

        data : JSON.stringify(data),

        success : function(result) {

    alert(result);



    **//This is where I want the client-side update to happen to the grid**



    },error : function(result){

           console.log(result);



           **//this is where I want to cancel the client side update to grid**

        }

    });



   }







   function displayGrid(config,data) {



       var fields = ;

      switch(config) {

           case "category":

                fields =  [

            {name: "Id",visible:false,width:0},

            { name: "Name", type: "text", width: 250, validate: "required" },

            { type: "control" }]



               break;

            default:

                break;

       }



    $("#jsGrid").jsGrid({

        width: "100%",

        height: "auto",



        inserting: true,

        editing: true,

        sorting: true,

        paging: false,



        data: data,

        fields: fields,

        configName:config,

        onItemInserting:onInsertCallback,

        onItemUpdating:onUpdateCallback,

        onItemDeleting:onDeleteCallback

    });



   }