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;
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:
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 !
Long story short, I was able to reload the grid with an updated array with this simple line:
$("#tblJobSpecs").jsGrid("option", "data", ary)
Observations:
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.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
...
});
After the DB has been modified through updateItem()
, insertItem
, or delteItem()
, I redefine ary
via our framework, then ...
... I tell jsGrid to "refresh" the grid with:
$("#tblJobSpecs").jsGrid("option", "data", ary)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With