diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js
index a37397219..f127d5297 100644
--- a/web/pgadmin/browser/static/js/node.ui.js
+++ b/web/pgadmin/browser/static/js/node.ui.js
@@ -556,6 +556,46 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
})
});
+ /*
+ * Control to select multiple columns.
+ */
+ var MultiSelectAjaxControl = Backform.MultiSelectAjaxControl = NodeAjaxOptionsControl.extend({
+ formatter: {
+ fromRaw: function (rawData, model) {
+ return (_.isUndefined(rawData) || _.isObject(rawData)) ? rawData : JSON.parse(rawData);
+ },
+ toRaw: function (formattedData, model) {
+ return formattedData;
+ }
+ },
+ template: _.template([
+ '',
+ '
',
+ ' ',
+ '
'
+ ].join("\n")),
+ getValueFromDOM: function() {
+ var res = [];
+
+ this.$el.find("select").find(':selected').each(function() {
+ res.push($(this).attr('value'));
+ });
+
+ return res;
+ },
+ defaults: _.extend({}, NodeAjaxOptionsControl.prototype.defaults, {
+ select2: {
+ multiple: true,
+ allowClear: true,
+ width: 'style'
+ }
+ })
+ });
return Backform;
});
diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css
index c8c0f2c0f..150567bb7 100755
--- a/web/pgadmin/static/css/overrides.css
+++ b/web/pgadmin/static/css/overrides.css
@@ -811,6 +811,12 @@ td.edit-cell.editable.sortable.renderable.editor {
height: auto;
}
+.select2-container--default.select2-container--focus
+.select2-selection--multiple {
+ border: 1px solid #aaa !important;
+ outline: 0 none;
+}
+
/* CSS for SqlField control */
.sql_field_layout {
border: 1px solid rgba(184, 184, 184, 1) !important;
@@ -900,4 +906,4 @@ ul.nav.nav-tabs {
.btn-primary{
margin: 2px 13px !important;
-}
+}
\ No newline at end of file