Develop Reference

dgrid not showing all rows in the store - javascript

I have a data array with 165 elements, and I am showing them in an OnDemandGrid, sorted by a date field. However, when the grid shows up, only the last 140 elements in the data array are shown (i.e., the elements with the 140 most recent dates). Still, if I click the date header to reverse the sort, the first 140 elements show (i.e., the elements with the 140 oldest dates). So my guess is that somehow the mechanism of lazy loading is not working, still I don't get why only the last portion of the array is shown instead of the first. I am not using pagination, nor I set other options related to the size. Any suggestion?
The grid is added to a div which is already in the page:
<div id="navList" class="dgrid-autoheight"></div>
Here's the code for the grid, below you can find the data array:
function fillNavList(data) {
var columns =
[
{
field : "date",
label : L["date"]
},
{
field : "value",
label : L["value"]
},
{
field : "dateModification",
label : L["dateModification"]
},
{
field : "status",
label : L["status"]
},
{
field : "valueRefId",
label : L["valueRefId"]
}
];
require(
[
"dojo/on",
"dstore/Memory",
"dstore/Filter",
"dgrid/OnDemandGrid",
"dojo/_base/declare"
], function(on, Memory, Filter, OnDemandGrid, declare) {
var store = new Memory({
data : data
});
var navList = new (declare(
[
OnDemandGrid
]))({
columns : columns,
sort: "date",
collection : store,
addUiClasses : false
}, "navList");
});
}
And here's the data:
[{"date":"2000-01-31","value":96.02,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2002-02-28","value":100,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2002-03-29","value":92.48,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2002-04-30","value":93.91,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2002-05-31","value":100.25,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2002-06-28","value":107.65,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2002-07-31","value":114.06,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2002-08-30","value":120.26,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2002-09-30","value":126.43,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2002-10-31","value":116.66,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2002-11-29","value":110.73,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2002-12-31","value":119.37,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2003-01-31","value":135.13,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2003-02-28","value":144.88,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2003-03-31","value":126.29,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2003-04-30","value":128.12,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2003-05-30","value":137.91,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2003-06-30","value":127.41,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2003-07-31","value":119.34,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2003-08-29","value":119.42,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2003-09-30","value":127.37,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2003-10-31","value":146.88,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2003-11-28","value":146.48,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2003-12-31","value":154.32,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2004-01-30","value":160.79,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2004-02-27","value":174.37,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2004-03-31","value":178.51,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2004-04-30","value":157.99,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2004-05-31","value":146.95,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2004-06-30","value":145.87,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2004-07-30","value":145.27,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2004-08-31","value":136.25,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2004-09-30","value":146.82,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2004-10-29","value":147.94,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2004-11-30","value":162.19,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2004-12-31","value":154.17,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2005-01-31","value":147.57,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2005-02-28","value":148.36,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2005-03-31","value":151.77,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2005-04-29","value":137.69,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2005-05-31","value":132.07,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2005-06-30","value":139.09,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2005-07-27","value":148.3,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2005-08-31","value":152.43,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2005-09-30","value":173.12,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2005-10-31","value":163.36,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2005-11-30","value":188.31,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2005-12-30","value":204.03,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2006-01-31","value":226.65,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2006-02-28","value":220.54,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2006-03-31","value":249.33,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2006-04-28","value":277.9,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2006-05-31","value":266.03,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2006-06-30","value":249.8,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2006-07-31","value":236.82,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2006-08-31","value":241.44,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2006-09-29","value":243.85,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2006-10-06","value":243,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2006-10-31","value":243.54,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2006-11-30","value":244.9,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2006-12-29","value":248.81,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2007-01-31","value":250.2,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2007-02-28","value":237.24,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2007-03-30","value":216.31,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2007-04-30","value":221.92,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2007-05-31","value":232.35,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2007-06-29","value":243.63,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2007-07-31","value":202.47,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2007-08-31","value":163.19,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2007-09-28","value":169.58,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2007-10-31","value":192.84,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2007-11-30","value":176.27,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2007-12-31","value":191.2,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2008-01-31","value":232.59,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2008-02-29","value":299.72,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2008-03-31","value":275.87,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2008-04-30","value":252.21,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2008-05-30","value":265.71,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2008-06-30","value":288.32,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2008-07-31","value":234.16,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2008-08-29","value":218.41,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2008-09-30","value":243.7,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2008-10-31","value":354.57,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2008-11-28","value":379.28,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2008-12-31","value":399.38,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2009-01-30","value":405.77,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2009-02-27","value":405.65,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2009-03-31","value":392.02,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2009-04-30","value":370.42,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2009-05-29","value":365.6,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2009-06-30","value":340.71,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2009-07-31","value":338.9,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2009-08-31","value":375.67,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2009-09-30","value":380.63,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2009-10-30","value":350.71,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2009-11-30","value":388.24,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2009-12-31","value":375.85,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-01-29","value":361.39,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-02-26","value":335.54,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-03-10","value":318.26,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-03-31","value":318.16,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-04-30","value":324.68,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-05-28","value":296.24,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-05-31","value":296.21,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-06-30","value":297.78,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-07-30","value":261.96,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-08-31","value":300.18,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-09-30","value":349.59,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-10-29","value":427.49,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-11-30","value":404.6,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2010-12-31","value":506.97,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2011-01-31","value":517.49,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2011-02-28","value":567.69,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2011-03-31","value":541.83,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2011-04-29","value":574.72,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2011-05-31","value":506.78,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2011-06-30","value":469.21,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2011-07-29","value":521.53,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2011-08-31","value":529.83,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2011-09-30","value":507.55,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2011-10-31","value":435.8,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2011-11-30","value":488.27,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2011-12-30","value":480.31,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2012-01-31","value":462.31,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2012-02-29","value":465.92,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2012-03-30","value":490.21,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2012-04-30","value":484.9,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2012-05-31","value":480.55,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2012-06-29","value":393.47,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2012-07-31","value":438.26,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2012-08-31","value":410.83,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2012-09-28","value":375.59,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2012-10-31","value":319.01,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2012-11-30","value":315.91,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2012-12-31","value":318.33,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2013-01-31","value":351.63,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2013-02-28","value":377.62,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2013-03-29","value":412.7,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2013-04-30","value":452.87,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2013-05-31","value":453.45,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2013-06-28","value":439.18,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2013-07-31","value":421.47,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2013-08-30","value":375.51,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2013-09-30","value":385.31,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2013-10-31","value":413.41,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2013-11-29","value":461.28,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2013-12-31","value":455.58,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2014-01-31","value":448.93,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2014-02-28","value":455.05,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2014-03-31","value":476.19,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2014-04-30","value":488.89,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2014-05-30","value":467.05,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2014-06-30","value":478.1,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2014-07-31","value":488.85,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2014-08-29","value":534.46,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2014-09-30","value":629.01,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2014-10-31","value":618.48,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2014-11-28","value":699.19,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2014-12-31","value":762.46,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2015-01-30","value":815.27,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2015-02-27","value":811.23,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2015-03-31","value":842.4,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2015-04-30","value":775.2,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2015-05-29","value":807.2,"dateModification":"2015-07-31","status":"Final","valueRefId":0},{"date":"2015-06-30","value":758.21,"dateModification":"2015-07-31","status":"Final","valueRefId":0}]
Thanks in advance

Found it! Turns out my data elements did not have an id attribute, and this is somehow messing up the grid's ability to render the rows. I found a pointer to the solution in https://github.com/SitePen/dstore/blob/master/docs/Stores.md where it says:
The data should be an array of objects, and all the objects are considered to be existing objects and must have identities
After adding a unique identifier to my data, everything works ok.

Related

Based on a drop down that has a value in the 1-10 range I am displaying N Rows (N = value of dropdown)
Each row acts as an object because it has 3 properties: x,y,z. All the rows I generate are stored in an array so the final format of the data is:
data:{
rows: [
{x:0,y:0,z:value},
.......
]
}
I have to verify that for each row the value of x,y,z doesn't pass 100 and if it does display an error.
I've tried doing it with a function that parses the array on each input change but besides the fact that it seem very inefficient it sometimes doesn't work.
How can I handle this validation on dynamically generated inputs ?
Thank you in advance!

Make a watcher that observes the array changes :
data:{
rows: [
{x:0,y:0,z:value},
.......
]
},
watch:{
rows:{
handler(val){
let check=this.rows.every(row=>Object.values(row).every(v=>v<100))
if(!check){
//error
}
},
deep:true
}
}

I have a bubble chart (using it as a scatter plot but whatever) from ngx-charts. The HTML is set up so that as the user clicks on an element of the page the contents of the chart change based on the updateTitleData() function. In testing however as I click on the elements the data of the scatterData array changes however this does not change the actual displayed chart. So my question is how to get the chart to dynamically reload while running.
I have read a bit about it online, people have said that you need to change the actual scatterData array rather than just the "series" element of it which I tried by making an array value in updateTitleData that held the whole array and then jut doing this.scatterData=newData; at the end of the function which again did set the data correctly but still didn't cause the chart to update.
I also read that you need to put a [update$]="update$" in the html code and then when defining the chart variables in the typescript code use update$: Subject<any> = new Subject(); followed by defining the function updateChart(){ this.update$.next(true); } so that you can just call updateChart() whenever you need the chart to update. I tried that however it would just throw an error while loading initially due to the [update$]="update$" element being included in its constructor.
public scatterData = [{
"name" : "LQArray",
"series" : [{
"name" : "a",
"x" : 1,
"y" : 2,
"r" : 1
}]
}];
private updateTitleData() {
if(this.regionData && this.regionData.location_quotient){
this.scatterData["series"] = [];
this.jobTitles.forEach((value) => {
var newScatterData = [{
"name":value,
"x":parseFloat(this.regionData.x_axis[value]),
"y":parseInt(this.regionData.y_axis[value]),
"r":1
}];
this.scatterData["series"].push(newScatterData);
});
}
}
Here is the code in question. The chart does display the "a" element that is defined at the beginning, but that should be deleted and replaced as soon as the element is clicked.

I figured it out.
I was populating the "series" element incorrectly.
What I had:
this.jobTitles.forEach((value) => {
var newScatterData = [{
"name":value
"x":parseFloat(this.regionData.x_axis[value]),
"y":parseInt(this.regionData.y_axis[value]),
"r":1
}];
this.scatterData["series"].push(newScatterData);
});
What I needed:
this.jobTitles.forEach((value) => {
var newScatterData = {
"name":value
"x":parseFloat(this.regionData.x_axis[value]),
"y":parseInt(this.regionData.y_axis[value]),
"r":1
};
this.scatterData[0]["series"].push(newScatterData);
});
this.scatterData=[...this.scatterData];
Basically needed the [0] in front of the ["series"] and needed to remove the array element from newScatterData.

I have a custom cell renderer to delete given entity.
function ActionButtonsCellRenderer() {}
ActionButtonsCellRenderer.prototype.init = function(cellRenderParams) {
var tempDiv = document.createElement('div');
var deleteButton = document.createElement("a");
deleteButton.href = "javascript:void(0)";
deleteButton.innerHTML = "<i class='fa fa-trash'></i>";
tempDiv.appendChild(deleteButton);
deleteButton.addEventListener("click",function(){
cellRenderParams.api.updateRowData({remove: [cellRenderParams.data]})
});
this.eGui = tempDiv.firstChild;
};
ActionButtonsCellRenderer.prototype.getGui = function() {
return this.eGui;
};
It actually deletes the row from GUI. No problem there.
But when user adds another row using below logic;
function addRow() {
var row = {t1 : "test"}
dataSource[dataSource.length] = row;
agGridOptions.api.setRowData(dataSource);
}
Deleted row also became visible again in the grid. Which means that the dataSource object is not updated.
What am I doing wrong here ? The dataSource must be updated in my scenario.
Isn't there a two-way binding which I can use ?

For deleting the selected rows use this code,
this.selectedNodes = this.GridOptions.api.getSelectedNodes();
this.GridOptions.api.removeItems(this.selectedNodes);
this.GridOptions.api.refreshView();
Now selected Row will be deleted.

Ag-grid makes a copy of the data that you provide to it. So when you are using updateRowData, ag-grid will update the data that it has, not your original data array. This is good design to avoid unexpected results and loss of original data.
There are two possible solutions to your issue:
mutate your original data anytime you need to update the data - this will likely get really messy really fast
--- OR ---
use the ag-grid's built in functionality of allowing it to update row data, then when you need to do something with the dataSource (such as downloading in an excel or sending to some other function) use the getModel() function to get the data that ag-grid is aware of.

For anyone that come across this post i know its a long time ago but.
I had to add and remove a row from one table to another without UI selection
Lets say we have a grid with common columnDefs e.g. headersName, fields ( its important to have fields) and etc.
We gonna have 2 columns:
{
headerName: 'Name',
field: 'name',
cellRenderer: params => params.data.name,
....
},
{
headerName: 'Age',
field: 'age',
cellRenderer: params => params.data.age,
....
},
What i did was:
const item = {
'name': 'New name',
'age': 25,
}
* Remove a row - if the grid already have this item
this.gridApi.updateRowData({ remove: [item] });
* Add row - if the grid doesn't have it
gridApi2 is your seconds grid table api
this.gridApi2.updateRowData({ add: [item] });
add/remove: [item] - it has to be array
if you need to refresh for some reasons (sometime change detector does't update ) there is 2 AgGrid refresh options: Refresh Cells and Redraw Rows..for this case i will use refreshCells()
this.gridApi.refreshCells({ force: true });
this.gridApi2.refreshCells({ force: true });
used materials: https://www.ag-grid.com/javascript-grid-data-update/
section: Full CRUD & Bulk Updating
method: Method 2 - Transaction
This works for me. Of course here we are assuming that we have a grid working e.g. (gridReady)="onGridReady($event)"

In my app I have an ItemsService which gets Items from Server and stores them as JSON objects in its cache variable. Items can be present in many places, e.g. in table or in graph/chart and so on.
For example, when I initialize a table - I need to pick only specific Items from cache, e.g. 1st, 3rd, 7th.
How to implement bi-directional connection between them? Basically I want table to contain references to specific items from cache so when I change an Item either in cache or in table - its state will be in sync all the time because it's the same Item.
Also when I delete Item from table - it needs to be removed from cache.
Here's example of table and cache structures:
Table:
table: {
"36": { // it's a name of a row
"72": [items], // it's a name of a column with corresponding items
"73": [items],
"74": [items]
},
"37": {
"72": [],
"73": [items],
"74": [items]
},
"38": {
"72": [],
"73": [],
"74": []
}
}
ItemsService cache (simplified version):
ItemsService = {
cache: [items]
};
Item structure:
{
id: 3,
parent_id: 1,
name: 'First Item',
siblings: [1,2,3],
active_users: [{user_id: 1, avatar_url: 'http://...'}, ...],
// 50 more fields :)
}
Also need to point out that I use angular-ui-sortable plugin to allow dragging of Items between columns/rows and I need to provide ng-model with array(I think). Here's how it looks right now:
<td ui-sortable="vm.sortableOptions"
ng-model="vm.table[row.id][column.id]">
<sb-item itemid={{item.id}}
ng-repeat="item in vm.table[row.id][column.id]">
</sb-item>
</td>

Unless for some reason you have to use two separate arrays, have you considered using a filter?

Your best bet would be objects. Variables that hold objects in javascript aren't really holding the object but a reference to said object. When you pass that variable into another one, the reference value gets copied so both variables point toward the same object.
var a = { 0: 'Property 0' };
var b = a;
b[0] = 'Property 0!'; //a[0] also the same.
delete b[0]; //a[0] nor b[0] exist anymore.

Using objects (rather than JSON) would work.
Then your cache and your table both point to same item objects. If you change something in the object, it is reflected at both ends.
var cacheArray = [{ item: 1 }, { item: 2}];
table[0][0] = cacheArray[0];
console.log(table[0][0].item); // 1
cacheArray[0].item = 9;
console.log(table[0][0].item); // 9.
Please note that the array and the table have not changed. They still point to the same objects.

i have created a new dgrid with a selector and tree column. I can get my data populated and the grid working properly, with the exception of the indent on childNodes in the tree column. I have created my tree as follows :
var treeGrid = new (declare([OnDemandGrid, Selection]))({
store:this.store,
id: this.id + ".tree",
selectionMode: "none",
loadingMessage: "Loading...",
noDataMessage : "No results found.",
showHeader :false,
columns : [
selector({className:"tocCheckboxColumn"}),
tree({field:"displayName", sortable:false, indentWidth:20})
]
},this.domNode);
My thinking is that I should be able to set indentWidth property as part of the column itself but it doesn't seem to working and all my children render directly below the parent without any indentation. Any ideas? Thanks!

So the problem was with my getChildren method of my store. In order to get my indentWidth to register I added a call before returning my queryResults to store.put for the object whose children I was adding after making changes to it in getChildren().
var children = [];
array.forEach(infos, lang.hitch(this, function(info) {
var child = {
...
};
children.push(child);
this.store.add(child);
}));
def.resolve(children);
object.fetchedChildren = true;
this.store.put(object);
return new dojo.store.util.QueryResults(def.promise);