Adding CSS animations to Add/Delete row

Hi

I was wondering it was possible to add animations to the Ig grid during add and delete row.

Currently I have  an application that uses real time data pushing similar to the one found on the following link.

https://www.igniteui.com/grid/binding-real-time-data

the difference being that my app add rows / deletes rows by updating the data source rather than simply updating rows.

would it be possible to add animations  such as collapse rows on delete row or push down (similar to push notifications applications) on new row data. 

Hello,

Thank you for posting in Infragistics Forum.

You can use igDataSource's insertRow() and deleteRow() methods to add/remove a row from igGrid.

ig.DataSource – insertRow method
https://igniteui.com/help/api/2019.2/ig.datasource#methods:insertRow

ig.DataSource – deleteRow method
https://igniteui.com/help/api/2019.2/ig.datasource#methods:deleteRow

You can get igDataSource instance of a particular grid by $("#grid1").data("igGrid").dataSource, where "grid1" is an id of the target igGrid.

Please also call igGrid's dataBind() method to update the UI with the new dataSource after that.

ui.igGrid – dataBind method
https://igniteui.com/help/api/2019.2/ui.iggrid#methods:dataBind

I have created a sample that demonstrates the usage of these methods.

igGrid.zip