How do I update the data in jsGrid without the ability to use AJAX in the loadData() controller? (The array isn't finished populating yet)

Question

I can display static data data: ary and I'm successful with updating, deleting, inserting, and filtering said static data:

controller: {

    loadData: function (filter) {

        return $.grep(ary, function (obj, index) {
            return
            /* conditional logic for filtering here */
        });

    },

    updateItem: function (item) {

        //call custom framework function responsible for updating record
        appName.doRequest("updateRecord");

    },

    insertItem: function (item) {

        //call custom framework function responsible for inserting record
        appName.doRequest("insertRecord");

    },

    deleteItem: function (item) {

        //call custom framework function responsible for deleting record
        appName.doRequest("deleteRecord");

    },

},

Please note, ary is a global variable. Basically, I can update ary anytime I want through our custom framework; however, it must be outside of the jsGrid controllers, or the array ends up empty.

Why do I have to call the function responsible for populating the array whilst outside of loadData() in order for the array to become accessible? How do I get my array to be available inside of loadData() when I call my company's special function?

The documentation says I can use AJAX requests with deferments/promises, but I don't believe our framework will allow for me to make direct AJAX requests to the backend.

Here's a snippet of the framework:

case "getJobSpecs":
    var jsonString, ary = [];
    var jsonString = $(data.xmldata).find("tblJobSpecs").text();
    ary = JSON.parse(jsonString);

    //results from server.  I can do anything to the DOM I want here
    break;

case "updateRecord":
    console.log(data.xmldata);
    //results from server.  I can do anything to the DOM I want here
    break;
case "insertRecord":
    console.log(data.xmldata);
    //results from server.  I can do anything to the DOM I want here
    break;
case "deleteRecord":
    console.log(data.xmldata);
    //results from server.  I can do anything to the DOM I want here
    break;

Answer 1

You can use arr.filter property and return the returns after checking your conditions,

$("#jsGrid").jsGrid({
        height: "90%",
        width: "100%",
        filtering: true,
        editing: false,
        sorting: true,
        paging: true,
        autoload: true,
        pageSize: 10,
        pageButtonCount: 5,
        deleteConfirm: "Do you really want to delete the client?",
        controller: {
            loadData: function (filter) {
                if (gridDataDb != undefined) {
                    for (var filterItem in filter) {
                        if (filter[filterItem] === "") {
                            $("#jsGrid").data("JSGrid").data = gridDataDb;
                        }
                    }
                }
                //this.data = Array.from($("#jsGrid").data("JSGrid").data);
                return $.grep($("#jsGrid").data("JSGrid").data, function (client) {
                    return (!filter.vcm_prescriberidname || client.vcm_prescriberidname.indexOf(filter.vcm_prescriberidname) > -1)
                        && (!filter.npid || client.npid.indexOf(filter.npid) > -1)
                        && (!filter.vcm_territoryname || client.vcm_territoryname.indexOf(filter.vcm_territoryname) > -1)
                        && (!filter.vcm_countryidname || client.vcm_countryidname.indexOf(filter.vcm_countryidname) > -1)
                        && (!filter.vcm_statefullname || client.vcm_statefullname.indexOf(filter.vcm_statefullname) > -1)
                        && (!filter.vcm_city || client.vcm_city.indexOf(filter.vcm_city) > -1)
                        && (!filter.vcm_zip || client.vcm_zip.indexOf(filter.vcm_zip) > -1)
                        && (!filter.currmonthsum || client.currmonthsum.indexOf(filter.currmonthsum) > -1)
                        && (!filter.lastquartersum || client.lastquartersum.indexOf(filter.lastquartersum) > -1)
                        && (!filter.thisyearsum || client.thisyearsum.indexOf(filter.thisyearsum) > -1)
                });
            }
        },

        fields: [
            { name: "vcm_prescriberidname", title: "Prescriber Name", type: "text", width: 20 },
            { name: "npid", title: "NPI ID", type: "text", width: 20 },
            { name: "vcm_territoryname", title: "Territory Name", type: "text", width: 20 },
            { name: "vcm_countryidname", title: "Country", type: "text", width: 20 },
            { name: "vcm_statefullname", title: "State", type: "text", width: 20 },
            { name: "vcm_city", title: "City", type: "text", width: 20 },
            { name: "vcm_zip", title: "ZipCode", type: "text", width: 15 },
            { name: "currmonthsum", title: "Curr Month TRx Sum", type: "text", width: 10 },
            { name: "lastquartersum", title: "Last Quarter TRx Sum", type: "text", width: 10 },
            { name: "thisyearsum", title: "Last Year TRx Sum", type: "text", width: 10 },
            //{ name: "vcm_prescriberidname", title: "Location", type: "text", width: 7 },
            { type: "control" }

        ]
    });

Look at the above piece of code, Two key notes:

1. Load Data through $("#jsGrid").jsGrid("option", "data", your_Data_Array).
2. Filter out data without Ajax using Array.filter.

NOTE: The filter object reference contains an Object containing all the columns in the jsGrid, So when filters are applied, the respective column with that filter value updated in the respective column is passed to the data set to filter the results.

Let me know if that helps !

Answer 2

Long story short, I was able to reload the grid with an updated array with this simple line:

$("#tblJobSpecs").jsGrid("option", "data", ary)

Observations:

1. ary is a global var updated through calls in our custom framework; even though I can call the framework from within the loadData() controller to populate ary, it's not available inside the loadData() function, for a reason I do not fully understand.

2. I no longer define the data option (now, the grid initializes with no data)

   $("#tblJobSpecs").jsGrid({
        width: "100%",
        //height: "400px",
        inserting: true,
        editing: true,
        sorting: true,
        selecting: true,
        paging: true,
        filtering: true,
   
        //data:  ary
   
        ...
   });
   

3. After the DB has been modified through updateItem(), insertItem, or delteItem(), I redefine ary via our framework, then ...

4. ... I tell jsGrid to "refresh" the grid with:

   $("#tblJobSpecs").jsGrid("option", "data", ary)