We Keep Coding

ag-Grid RowClassRule not updating after using updateRowData

I'm trying to update an ag-Grid row data the following way:
this.table.api.updateRowData({
update: [response.data]
})
The updating works fine, the cells get the updated values. However, Ag Grid is not re-evaluating the class of the row. Additionally, I get an error message:
ag-Grid: could not find data item as object was not found
Here is my rowClassRule:
rowClassRules: {
"row-disabled": function(params) {
if (params.data.status != 1) {
return true
}
}
}
What am I doing wrong here and how can I get ag Grid to update the class as well? I have tried using: rowNode.setData() which was working perfectly (updating the cell value + class) - but I can't use it because it's not refreshing the filters, unfortunately.

After setting the new row data, since you are using rowClass feature you have to use api.redrawRows()
rowNode.setData() being an api method is closely tied with ag-grid change detection mechanism and would automatically trigger api.refreshCells() for you. But if you are manually updating the data set, you need to invoke api.redrawRows() for styles to change.
As per docs -
Use redraw row if you want to create the row again from scratch. This
is useful when you have changed a property that only gets used when
the row is created for the first time such as:
Whether the row is fullWidth or not.
The cellRenderer used for any cell (as this is specified once when the cell is created).
You want to specify different styles for the row via the callbacks getRowStyle() or getRowClass().
Example here - redraw nodes

keep filter after ag-grid update

I'm trying to keep a grid's filter after updating a row.
When I click on a row in the grid, I open a dialog where I update the informations for this row, and then I look for the clicked row in the grid's rowData after that I update the corresponding record in the rowData with the values from the dialog, as following :
row[0].x = dg.x;
row[0].y = dg.y;
dg.gridOptions.rowData[index] = row[0];
dg.gridOptions.api.setRowData(newRows);
But after this I loose the filter on the grid, I did some search and I tried all the following solutions :
Setting the gridOptions property deltaRowDataMode to true.
filterParams: {apply: true, newRowsAction: 'keep'}
But none of these has worked.
How can I solve this ?

You can set the filterParams newRowsAction to keep, like that
dg.defaultColDef = { filterParams: { newRowsAction: 'keep'}} ;
refer to https://www.ag-grid.com/javascript-grid-filtering/index.php

Use this method (gridOptions.api.refreshCells()) instead of setRowData. Or if you need to use setRowData, save the filter model before the call and apply the filter again afterwards using these methods:
const model = this.gridOptions.api.getFilterModel();
//some code
this.gridOptions.api.setFilterModel(model);

I had same issue and this what I did to resolve it (kinda hacky).
Subscribe to rowDataChanged event of the ag grid.
(rowDataChanged)="onRowDataChanged($event)"
Inside the onRowDataChanged put your filtration logic
// Get a reference to the name filter instance
const filterInstance = this.gridApi.getFilterInstance('fieldNameHere');
// Call some methods on Set Filter API that don't apply the filter
filterInstance.setModel({
type: 'contains', // type of filter
filter: 'yourData' // set filter on data
});
// Get grid to run filter operation again
this.gridApi.onFilterChanged();
onRowDataChanged will be triggered twice, first when the grid clears everything and second when the data reloaded. So, you should put some conditions to avoid any errors.
For example, I needed to set the filter from the data that was loaded after the refresh this is what I did:
const filtered = this.rowData.filter(x => x.Id === this.Id);
if (filtered.length > 0) {
// Get a reference to the name filter instance
const filterInstance = this.gridApi.getFilterInstance('fieldNameHere');
// Call some methods on Set Filter API that don't apply the filter
filterInstance.setModel({
type: 'contains', // type of filter
filter: filtered[0].name // set filter on data
});
// Get grid to run filter operation again
this.gridApi.onFilterChanged();
}

Apply model changes immediately

I've form with some input fields, upon submit I make a $http call and populate a model object that binds data to a table on my view. Once user saw the result, they may change the data in the form and submit the same once again, I'm trying to clear the result and populate the data with the new result. Some time the result can be same, in such cases user is not able to understand whether the form was submitted and new results has been updated or not. I'm setting my model object to undefined expecting that the data on the table will get wiped. I also have an ng-if for null check of the object and control the display of the table, I expect it to hide the table, but unfortunately it is not happening. How can I do that? $scope.apply() is the only way for me to do that. I hate to use it as it causes full digest cycle. Please advise.

You can create a separate scope for clearing the data and call that using model on button click.
Example
$scope.clearData = function () {
$scope.ApplicationFormName = "";
$scope.FirstName="";
//put your logic for clearing the form here
};
in HTML
<button title="Clear" ng-click="clearData()"></button>

ExtJS How to update filtered store data?

Just doing these steps:
I have grid filled with data from store.
I filter it (for example: Show only with status "late").
Data in store is updated.
I still see filtered old data (old records with status late).
I remove filter, All new data appear, with all old records which were not visible during filter.
Maybe someone know why and how to fix this?
FIXED
This code in store made a trick:
listeners : {
beforeload : function() {
this.data.clear();
if(this.data._source)
this.data._source.clear();
}
},

You can bind yourStore.reload() to your update event.

Retrieving the updated datasource from YUI datatable after editing it

I am using the datatables from YUI 2.8.2 and its widgets to edit a datasource (YAHOO.example.Data.response) as follows:
this.bpDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.response);
response_datasource = this.bpDataSource;
this.bpDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
this.bpDataSource.responseSchema = {
resultsList: "item_evaluacion",
fields: [ ... ]
};
this.standardSelectDataTable = new YAHOO.widget.ScrollingDataTable("div_item",
bpColumnas, this.bpDataSource, {height:"9em"} );
I want to retrieve the edited data from this datatable and proccess it. I tried a variable pointing to this.bpDataSource first but this variable contains only the original datasource without the changes the user made.
How can I retrieve the updated version of my datasource?

The DataSource only retrieves the data but does not keep a reference to the data retrieved. Once it has passed the retrieved data to whatever requested it, in this case DataTable, it forgets about it. DataTable then keeps the data in the RecordSet collection, which is composed of individual Record instances where you can fetch the values by field name. For some funny reason, the API docs for both Record and RecordSet are not under DataTable. I know the docs for those two are somewhere in there, but they somehow got filed under some other component.
Anyway, in DataTable, you have method getRecord() which takes an index. You can loop through it until it returns null or undefined. Otherwise, I believe you could do getRecordset().getLength() and use that to iterate with a for loop. Then, on each record instance, method getData() takes the column key and returns the value.
For more information read the two 'Working with the DataTable widget' articles referenced in the heading of DataTable.