this could be an old question, but i want to clarify, in 2021 do we have any way to achieved this dynamically change datasource without reset grid state behavior?
here is my problem,
Due to the 1st level data row is too huge(>15k), i do not want to fetch all data from server and build the model at the beginning of setup the grid. (initial load may be 200 rows)
Thus, i tried few ways but none of them can achieve what we want.
1) Dynamically add more data with "igGridUpdating.addrow"
with enable the virtualization, i added code in onRendered event to perform subsequence load for the data, after that using igGridUpdating.addrow to expand the datasource.here is the limitation:a) the scrollbar always jump to bottom, may be want to show me the new added row?
b) it took 1-2 minute to add another 200 rows, and the UI is freeze
2) utilize igGridAppendRowOnDemand
i added code in onRequesting event to perform subsequence load, but have no idea how to expand the datasource,
it look like the "UI" table is update with new rows, if i just hard assign the new data concate with the data in ui.owner.grid.options.dataSource.settings.dataSource, ui.owner.grid.options.dataSource._data , ui.owner.grid.options.dataSource._dataView
But when perform row expansion, the dataview and the datasource seem like going crazy. i believe it was due to we are go through some proper API and the internal data is just go wrong.
here is the limitation:a) instead of setting up the remoteUrl, can we point to some promise function to get the data? i have a local backend code to perform all the data loading, and it does not have any url
b) virtualization need to be disable
3) just set the datasource with latest data, as i mention, we will lost all the grid state
Using addRow could work if you cache your requests - say you get your records in chunks of 200 but only add 10-20s at a time to the UI so that the slow addRow doesn't cause hangs in your application.
You could also just add the records to the grid data source and call dataBind but that doesn't keep the expansion state. In both cases you can reset the scroll position to its original place.
The best option would most likely be remote paging as that is basically supported out of the box. You could even achieve it using the MVC Wrapper without using any additional code on your side. Just set the page size to 200 and the wrapper will handle the data binding for you.
can you point me to the MVC wrapper you mention? does it work with pulling the data from a function instead of remote server url?
The MVC wrapper handles the client-server communication such as remote binding. Generally speaking you just feed it a Queryable server-side and it will do the URL param parsing and the queries for you. Our help documentation contains examples of remote binding and operations and they are all based on using the MVC helper.
For paging for example you may find information here: https://www.igniteui.com/help/iggrid-paging#mvc
Hierarchical grid: https://www.igniteui.com/help/ighierarchicalgrid-binding-to-webapi
But MVC won't give you an out of the box solution for AppendRowsOnDemand. If you are ok with using Paging instead, you may also implement it manually using the guidance from the following paragraph: https://www.igniteui.com/help/iggrid-paging#remote .