Current filter:
                                You should refresh the page.
                                  • I would like to know how to determine when the data grid is fully loaded? I have tried using different events (onContentReady, onIntitialized) from the dxDataGrid's API to help with that, and even using the isLoaded() method of the dataSource, but none have seem to worked so far. Is there anything that could tell me when the data grid is really complete (i.e. finished drawing itself, and loading the proper amount of data it needs) when it is initialized?

                                    Any help would be appreciated.

                                1 Solution

                                Creation Date Importance Sort by

                                Hi,

                                I recommend that you use the DataSource.onLoadingChanged event for this purpose. See also: T394075: dxDataGrid loading state tracking.

                                UPDATE:

                                It is expected that the  DataSource.onLoadingChanged event is raised multiple times because initially the data loading process starts. After that, once this process is finished, this event is raised again. As we mentioned above, you need to check the isLoading event's argument in order to call your custom logic only when necessary. I have slightly modified the Custom Data Source demo to illustrate this idea: https://codepen.io/anon/pen/oaLqpR. We hope this makes sense.

                                UPDATE:

                                It appears that you are using the Virtual Scrolling mode. In this scenario, the grid's data is not loaded completely. It is loaded by portions when the end user scrolls the DataGrid content. Thus, the onLoadingChagned event handler is called multiple times. If you need to load and render the DataGrid control only once, disable paging and virtual scrolling. For example:

                                [JavaScript]
                                paging: { enabled: false }, scrolling: { //mode: "virtual", ...

                                However, please note that this approach is not efficient in the case of a large datasource. So, you can filter its records to increase grid's performance.

                                Thanks,
                                Alessandro

                                Show all comments
                                • Steven Langlois 10.04.2018

                                  Hello Alessandro,

                                  From our observation we noticed that the onLoadingChanged event gets fired multiple times when we load the data in our application. Also, we tried using the onChanged event as well, and it fires multiple times too, even though the documentation states that is raised after the data is successfully loaded.

                                  Both of these events don't really work for our case, we really need an event to just fire just once letting us know that the data grid is complete and truly done with what it is doing.

                                • Alisher (DevExpress Support) 10.04.2018

                                  Hello Steven,

                                  There is no special API for this. The onLoadingChanged method Alessandro suggested provides the isLoading argument that indicates whether data is being loaded. This argument can be used to perform a custom code. Would you please clarify why it is not suitable for you? Describe your scenario in greater detail. We will do our best to find an appropriate solution for you.

                                • Steven Langlois 10.04.2018

                                  Hi Alisher,

                                  Currently, our application has a search functionality that queries a database and opens a new tab with the resulting data in a data grid and several charts. We are extending that functionality to allow for multiple tabs (multiple search results) to be opened up one after another.

                                  The problem is, if we have a huge search being done, lets say 8000 records, and it goes to the next search (new tab) in the list, the browser will have issues trying to process all that information.

                                  If we use the onLoadingChanged method as suggested, it not work because it fires more that once during the span of the data source being loaded into the data grid. This will result in multiple searches (tabs) to be opened all at once, and the browser won't be able to process it all.

                                  Right now, we need an event that can tell us this tab's data grid is completely done, and go ahead and kick off the next search in the list. That way the browser can process that tab's information first, then go tell the application it can do the next search in the list, if there's any.  

                                • Alessandro (DevExpress Support) 10.05.2018

                                  Hi,

                                  Thank you for your clarification. I have modified our original answer. Please review it.

                                • Steven Langlois 10.05.2018

                                  I tried using onLoadingChagned with isLoading parameter as follows but isLoading is changing multiple times during loading the data grid.
                                  I've attached a video to show what we are seeing. Here is a code snippet:

                                  [JavaScript]
                                  var sharedDatasource = new DevExpress.data.DataSource({ store: params.data.searchResultData, onLoadingChanged: function (isLoading) { console.log("isLoading is: " + isLoading); if (!isLoading) console.log("dataSource onLoadingChanged fired"); } });

                                • Alisher (DevExpress Support) 10.08.2018

                                  Hi Steven,

                                  >>we need an event that can tell us this tab's data grid is completely done, and go ahead and kick off the next search in the list.
                                  We do not have such an event. I still believe that the onLoadingChanged event can be used in your case. You can use the isLoading argument as an indicator that the loading is started/finished. If you think that you cannot use this event, please prepare a simple project illustrating your scenario so that we can examine it.

                                  Thank you in advance.

                                • Steven Langlois 10.15.2018

                                  Hello Alisher,

                                  Here's the sample project that illustrates the scenario that we are running into. If you open the developer tools' console to begin with and run the project, the isLoading argument will come back but its callback event will fire multiple times, thus opening the tabs up more than once. This is not what we want. As mentioned before, we want some kind of event from the data grid that will fire once, after it's completely done (all the data loaded, drawing finished rendering). That way we can send data and open up a new tab with the resulting data only once.

                                  The resulting tab window with a data grid will do the same thing, fire a one time event after everything is done, and open a new tab if need be. This will happen X number of times, depending on the query.

                                  Hopefully this explains things better.

                                • Alessandro (DevExpress Support) 10.16.2018

                                  Hi,

                                  Thank you for your sample. I have updated our original answer. Please review it.