Backform control for selecting multiple columns.

Usage:

{
  id: 'columns', label: '{{ _('Columns') }}',
  type: 'collection', group: '{{ _('Definition') }}', editable:true,
  canDelete: true, canAdd: true, control: Backform.MultiColumnSelectControl,
  deps: ['index'], node: 'column',
  model: pgBrowser.Node.Model.extend({
    keys: ['column'],
    defaults: {
      column: undefined
    }
  })
}

Note: When using this control model should have column attribute. And node property should be column.

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([
+      '<label class="control-label col-sm-4"><%=label%></label>',
+      '<div class="pgadmin-controls col-sm-8">',
+      '  <select multiple="multiple" style="width:100%;" class="pgadmin-controls <%=extraClasses.join(\' \')%>" name="<%=name%>" value="<%-JSON.stringify(value)%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%>>',
+      '    <% for (var i=0; i < options.length; i++) { %>',
+      '      <% var option = options[i]; %>',
+      '      <option value=<%-option.value%> <%=value != null && _.indexOf(value, option.value) != -1 ? "selected" : ""%> <%=option.disabled ? "disabled=\'disabled\'" : ""%>><%-option.label%></option>',
+      '    <% } %>',
+      '  </select>',
+      '</div>'
+      ].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;
 });

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;
-}
+}