[pgadmin-hackers] backgrid select2 cell

[Harshal Dhumal]

Hi,

Please find patch for backgrid select2 cell

Usage:

schema: [
    {id: 'name', label:'Name', type:'text', cell:
Backgrid.Extension.Select2Cell, editable: true,
    optionValues: [['Allow','allow'], ['Prefer','prefer'],
['Require','require'], ['Disable','disable']],
    select2:{placeholder: "Select an option"}},
.
.



-- 
*Harshal Dhumal*
*Software Engineer *



EenterpriseDB <http://www.enterprisedb.com>

diff --git a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
index b12c089..de73b63 100644
--- a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
@@ -289,6 +289,78 @@
     }
   });
 
+
+  /*
+   *  Select2Cell for backgrid.
+   */
+  var Select2Cell = Backgrid.Extension.Select2Cell = Backgrid.Cell.extend({
+
+    className: "select2-cell",
+
+    events: {
+      "change": "onSave",
+      "select2:unselect": "onSave"
+    },
+    render: function () {
+      var col = _.defaults(this.column.toJSON(), this.defaults),
+          model = this.model, column = this.column,
+          editable = Backgrid.callByNeed(col.editable, column, model),
+          optionValues = this.column.get('optionValues');
+
+      this.$el.empty();
+
+      if (!_.isArray(optionValues)) throw new TypeError("optionValues must be an array");
+
+      /* Add empty option as Select2 requires any empty '<option><option>' for
+       * some of its functionality to work.
+       */
+      optionValues.unshift([null, null]);
+
+      var optionText = null,
+          optionValue = null,
+          template = _.template('<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>', null, {variable: null}),
+          model = this.model,
+          selectedValues = model.get(this.column.get("name"));
+
+      delete this.$select;
+
+      this.$select = $("<select>", {tabIndex: -1}),
+      this.$el.append(this.$select);
+
+      for (var i = 0; i < optionValues.length; i++) {
+        var optionValue = optionValues[i];
+
+        if (_.isArray(optionValue)) {
+          optionText  = optionValue[0];
+          optionValue = optionValue[1];
+
+          this.$select.append(template({
+            text: optionText,
+            value: optionValue,
+            selected: _.indexOf(selectedValues, optionValue) > -1
+          }));
+        } else {
+          throw new TypeError("optionValues elements must be a name-value pair.");
+        }
+      }
+      // Initialize select2 control.
+      this.$select.select2(_.defaults(
+          {'disabled': !editable}, col.select2));
+
+      this.delegateEvents();
+
+      return this;
+    },
+
+    /**
+       Saves the value of the selected option to the model attribute.
+    */
+    onSave: function (e) {
+      var model = this.model;
+      var column = this.column;
+      model.set(column.get("name"), this.$select.val(),{silent:true});
+    }
+  });
   return Backgrid;
 
 }));

-- 
Sent via pgadmin-hackers mailing list (pgadmin-hackers@postgresql.org)
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers