diff --git a/web/pgadmin/dashboard/static/js/dashboard.js b/web/pgadmin/dashboard/static/js/dashboard.js index 8d7e42ec..4a1475ae 100644 --- a/web/pgadmin/dashboard/static/js/dashboard.js +++ b/web/pgadmin/dashboard/static/js/dashboard.js @@ -480,9 +480,17 @@ define('pgadmin.dashboard', [ $(container).data('grid', grid); $(container).data('filter', filter); }, - + __loadMoreRows: function(e) { + let elem = e.currentTarget; + if ((elem.scrollHeight - 10) < elem.scrollTop + elem.offsetHeight) { + if (this.data.length > 0) { + this.local_grid.collection.add(this.data.splice(0, 50)); + } + } + }, // Render the data in a grid render_grid_data: function(container) { + var that = this; var data = $(container).data('data'), grid = $(container).data('grid'), filter = $(container).data('filter'); @@ -493,7 +501,11 @@ define('pgadmin.dashboard', [ data.fetch({ reset: true, - success: function() { + success: function(res) { + that.data = res.models; + that.local_grid = grid; + grid.collection.reset(that.data.splice(0,50)); + // If we're showing an error, remove it, and replace the grid & filter if ($(container).hasClass('grid-error')) { $(container).removeClass('grid-error'); @@ -501,6 +513,14 @@ define('pgadmin.dashboard', [ $(filter.el).show(); } + if(that.data.length > 50) { + // Listen scroll event to load more rows + $('.pg-panel-content').on('scroll', that.__loadMoreRows.bind(that)); + } else { + // Listen scroll event to load more rows + $('.pg-panel-content').off('scroll', that.__loadMoreRows); + } + // Re-apply search criteria filter.search(); }, diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss index d990b550..861c9b08 100644 --- a/web/pgadmin/static/scss/_pgadmin.style.scss +++ b/web/pgadmin/static/scss/_pgadmin.style.scss @@ -166,6 +166,7 @@ right:0px; bottom:0px; height: 100%!important; + overflow: scroll; } .pg-prop-footer {