How to load 4000 records faster on frontend using ag grid

0
votes

im using ag grid rowmodeltype is enterprise (server side) because if i load all the records, api response took time almost 2-3 minutes so using server side with pagination

  1. Column label grouping ag grid didn't provide any backend sample to handle that.
  2. if we load all the records on client side all the ag grid features works so is there any way to load records faster almost 10mb size data with 30 columns and 40000 records.
1
ag-grid

1 Answers

1
votes

Most bottlenecks occur on the backend (database retrieval). To reduce the effect of slowness, you can adopt this method that I used.

  1. Enhance your backend api to support server side paging calls
  2. Refactor your loading ajax calls to do a small size call (e.g. top 400 rows).
  3. On completion of this first load, check if there's any more records. If yes, set a recursive load until complete.

Now, the user will 'see' those first 400 rows, while its still loading the remaining 3600 rows. This is where you need to display a loading icon to show progress.

Below's a sample of codes to load this.

var myList = [];

var loadDataFunc = function( start, limit ) {
        _self.Status.IsLoading = true;

        $http
            .get( DataUrl + "?start=" + start + "&limit=" + limit)
            .then(function(response){

                if( response && response.data && response.data.List) {
                    if( response.data.Total > 0 ) {
                        for( var z = 0; z < response.data.List.length; z++ ) {
                            myList.push(response.data.List[z]);
                        }

                        var currentItemsLoaded = start + response.data.List.length;
                        if( currentItemsLoaded < response.data.Total ) {
                            //means we still have pending to load, then we load again!
                            setTimeout(function(){
                                loadDataFunc(currentItemsLoaded, limit);
                            }, 500);
                        }else {
                            //If it reaches here, it means we have completed loading
                            _self.Status.IsLoading = false;
                            _self.Status.IsLoaded = true;
                        }
                        BindDataToGrid();
                    } else {
                        _self.Status.IsLoading = false;
                        _self.Status.IsLoaded = true;   
                        if( start === 0 ) {
                            BindDataToGrid();
                        }
                    }
                }
                else {
                    _self.Status.IsLoading = false;
                    _self.Status.IsLoaded = true;
                }
            })
            .catch(function(response){
                _self.Status.IsLoading = false;
                //error!
            });
    };      

    function BindDataToGrid () {
        setTimeout(function(){                  
          grid.api.setRowData(myList);
        },100);
    };