diff --git a/docs/en_US/release_notes_4_17.rst b/docs/en_US/release_notes_4_17.rst index 7ae139462..d02c34daa 100644 --- a/docs/en_US/release_notes_4_17.rst +++ b/docs/en_US/release_notes_4_17.rst @@ -18,6 +18,7 @@ Housekeeping | `Issue #5017 `_ - Use cheroot as default production server for pgAdmin4. | `Issue #5023 `_ - Refactored SQL of Views and Materialized Views. | `Issue #5024 `_ - Refactored SQL of Functions and Procedures. +| `Issue #5038 `_ - Added support for on-demand loading of items in Select2. Bug fixes ********* diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js index cd11946fd..836d83d1f 100644 --- a/web/pgadmin/browser/static/js/node.ui.js +++ b/web/pgadmin/browser/static/js/node.ui.js @@ -93,6 +93,57 @@ define([ ); }); + /* Define on demand loading of dropdown items. + * This also requires ajax option of select2 to be set. + * The trick is, ajax: {} will also work even if you're actually not + * using ajax. + */ + $.fn.select2.amd.define('select2/onDemandDataAdapter', [ + 'select2/utils', + 'select2/data/select', + ], function (Utils, SelectAdapter) { + + function onDemandDataAdapter ($element, options) { + this.$element = $element; + this.options = options; + } + Utils.Extend(onDemandDataAdapter, SelectAdapter); + onDemandDataAdapter.prototype.query = function (params, callback) { + var data = []; + var self = this; + if (!params.page) { + params.page = 1; + } + var pageSize = 20; + + var $options = this.$element.children(); + $options.each(function () { + var $option = $(this); + + if (!$option.is('option') && !$option.is('optgroup')) { + return; + } + + var option = self.item($option); + + var matches = self.matches(params, option); + + if (matches !== null) { + data.push(matches); + } + }); + + callback({ + results: data.slice((params.page - 1) * pageSize, params.page * pageSize), + pagination: { + more: data.length >= params.page * pageSize, + }, + }); + }; + + return onDemandDataAdapter; + }); + /* * NodeAjaxOptionsControl * This control will fetch the options required to render the select diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js index 93aaa9192..51fb5d763 100644 --- a/web/pgadmin/static/js/backform.pgadmin.js +++ b/web/pgadmin/static/js/backform.pgadmin.js @@ -2190,6 +2190,7 @@ define([ emptyOptions: false, preserveSelectionOrder: false, isDropdownParent: false, + onDemandLoad: true, }); // Evaluate the disabled, visible, and required option @@ -2248,6 +2249,16 @@ define([ select2Opts.data = data.rawValue; } + /* Set the pgadmin adapter for on demand load. + * Setting empty ajax option will enable infinite scrolling. + */ + if(select2Opts.onDemandLoad) { + select2Opts.dataAdapter = $.fn.select2.amd.require('select2/onDemandDataAdapter'); + if(_.isUndefined(select2Opts.ajax)) { + select2Opts.ajax = {}; + } + } + this.$sel = this.$el.find('select').select2(select2Opts); // Add or remove tags from select2 control @@ -2262,8 +2273,6 @@ define([ $(this).empty(); } }); - - } // Select the highlighted item on Tab press. diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js index b72d724c2..2f0a8a018 100644 --- a/web/pgadmin/static/js/backgrid.pgadmin.js +++ b/web/pgadmin/static/js/backgrid.pgadmin.js @@ -883,6 +883,7 @@ define([ select2_opts = _.extend({ openOnEnter: false, multiple: false, + onDemandLoad: true, }, self.defaults.select2, (col.select2 || {}) ), @@ -943,6 +944,12 @@ define([ select2_opts['placeholder'] = ''; } + if(select2_opts.onDemandLoad) { + select2_opts.dataAdapter = $.fn.select2.amd.require('select2/onDemandDataAdapter'); + if(_.isUndefined(select2_opts.ajax)) { + select2_opts.ajax = {}; + } + } // Initialize select2 control. this.$sel = this.$select.select2(select2_opts);