Using different strategy to render different type of data based on the

type for the Variable control, instead of using the complex DynamicCell.

web/pgadmin/browser/server_groups/servers/static/js/variable.js

@@ -31,6 +31,53 @@
   }
 } (this, function(root, _, $, Backbone, Backform, Alertify, pgAdmin, pgNode) {
 
+  /*
+   * cellFunction for variable control.
+   * This function returns cell class depending on vartype.
+   */
+  var cellFunction = function(model) {
+    var self = this,
+      name = model.get("name"),
+      availVariables = self.get('availVariables'),
+      variable = availVariables[name];
+
+    switch(variable && variable.vartype) {
+      case "bool":
+        /*
+         * bool cell and variable can not be stateless (i.e undefined).
+         * It should be either true or false.
+         */
+        if (_.isUndefined(model.get("value"))) {
+          model.set("value", false);
+        }
+
+        return Backgrid.Extension.SwitchCell;
+      break;
+      case "enum":
+        var options = [],
+            enumVals = variable.enumvals;
+
+        _.each(enumVals, function(enumVal) {
+          options.push([enumVal, enumVal]);
+        });
+
+        return Backgrid.Extension.Select2Cell.extend({optionValues: options});
+      break;
+      case "integer":
+        return Backgrid.IntegerCell;
+        break;
+      case "real":
+        return Backgrid.NumberCell.extend({decimals: 0});
+      break;
+      case "string":
+        return Backgrid.StringCell;
+      break;
+      default:
+        return Backgrid.Cell;
+      break;
+    }
+  }
+
   /**
    *  VariableModel used to represent configuration parameters (variables tab)
    *  for database objects.
@@ -46,8 +93,8 @@
     schema: [
       {id: 'name', label:'Name', type:'text', editable: false, cellHeaderClasses: 'width_percent_30'},
       {
-        id: 'value', label:'Value', type: 'text', cell: 'dynamic-variable',
+        id: 'value', label:'Value', type: 'text', editable: true,
-        editable: true, cellHeaderClasses: 'width_percent_50'
+        cellFunction: cellFunction, cellHeaderClasses: 'width_percent_50'
       },
       {id: 'database', label:'Database', type: 'text', editable: false},
       {id: 'role', label:'Role', type: 'text', editable: false}
@@ -85,102 +132,6 @@
     }
   });
 
-  /*
-   * Dynamic Variable cell. Used for variable data type column in Variables tab.
-   * Behaviour of cell depends on variable data type.
-   */
-  var DynamicVariableCell = Backgrid.Extension.DynamicVariableCell = Backgrid.Cell.extend({
-    /*
-     * Mapping of postgres data type to backgrid cell type.
-     */
-    variableCellMapper: {
-      "bool":Backgrid.Extension.SwitchCell,
-      "enum":Backgrid.Extension.Select2Cell,
-      "string":Backgrid.Cell,
-      "integer":Backgrid.IntegerCell,
-      "real":Backgrid.NumberCell
-    },
-    initialize: function (opts) {
-
-      var self = this,
-          name = opts.model.get("name");
-      self.availVariables = opts.column.get('availVariables');
-
-      var variable = (self.availVariables[name]),
-          cell = self.variableCellMapper[variable && variable.vartype] || Backgrid.Cell;
-
-      /*
-       * Set properties for dynamic cell.
-       */
-      _.each(cell.prototype, function(v,k) {
-        self[k] = v;
-      });
-
-      DynamicVariableCell.__super__.initialize.apply(self, arguments);
-
-      switch(variable && variable.vartype) {
-        case "bool":
-          // There are no specific properties for BooleanCell.
-          break;
-
-        case "enum":
-          var options = [],
-              name = self.model.get("name"),
-              enumVals = variable.enumvals;
-
-          _.each(enumVals, function(enumVal) {
-            options.push([enumVal, enumVal]);
-          });
-
-          self.optionValues = options;
-          self.multiple = cell.prototype.multiple;
-          self.delimiter = cell.prototype.delimiter;
-
-          self.listenTo(
-              self.model, "backgrid:edit",
-              function (model, column, cell, editor) {
-                if (column.get("name") == self.column.get("name")) {
-                  editor.setOptionValues(self.optionValues);
-                  editor.setMultiple(self.multiple);
-                }
-              });
-          break;
-
-        case "integer":
-
-          self.decimals = 0;
-          self.decimalSeparator = cell.prototype.decimalSeparator;
-          self.orderSeparator = cell.prototype.orderSeparator;
-          var formatter = self.formatter;
-
-          formatter.decimals = self.decimals;
-          formatter.decimalSeparator = self.decimalSeparator;
-          formatter.orderSeparator = self.orderSeparator;
-
-          break;
-
-        case "real":
-
-          self.decimals = cell.prototype.decimals;
-          self.decimalSeparator = cell.prototype.decimalSeparator;
-          self.orderSeparator = cell.prototype.orderSeparator;
-
-          var formatter = self.formatter;
-
-          formatter.decimals = 0;
-          formatter.decimalSeparator = self.decimalSeparator;
-          formatter.orderSeparator = self.orderSeparator;
-
-          break;
-
-        case "string":
-        default:
-          // There are no specific properties for StringCell and Cell.
-          break;
-      }
-    }
-  });
-
   /**
    * Variable Tab Control to set/update configuration values for database object.
    *

web/pgadmin/static/js/backgrid/backgrid.pgadmin.js

@@ -22,6 +22,49 @@
     factory(root, root._, (root.jQuery || root.Zepto || root.ender || root.$), root.Backbone, root.Backform);
   }
 } (this, function(root, _, $, Backbone, Backform, Alertify) {
+
+  /*
+     * Add mechanism in backgrid to render different types of cells in
+     * same column;
+   */
+
+  // Add new property cellFunction in Backgrid.Column.
+  _.extend(Backgrid.Column.prototype.defaults, { cellFunction: undefined });
+
+  _.extend(Backgrid.Row.prototype, {
+    makeCell: function (column) {
+      return new (this.getCell(column))({
+        column: column,
+        model: this.model
+      });
+    },
+    /*
+     * getCell function will check and execute user given cellFunction to get
+     * appropriate cell class for current cell being rendered.
+     * User provided cellFunction must return valid cell class.
+     * cellFunction will be called with context (this) as column and model as
+     * argument.
+     */
+    getCell: function (column) {
+      var cf = column.get("cellFunction");
+      if (_.isFunction(cf)){
+        var cell = cf.apply(column, [this.model]);
+        try {
+          return Backgrid.resolveNameToClass(cell, "Cell");
+        } catch (e) {
+          if (e instanceof ReferenceError) {
+            // Fallback to column cell.
+            return column.get("cell");
+          } else {
+            throw e; // Let other exceptions bubble up
+          }
+        }
+      } else {
+        return column.get("cell");
+      }
+    }
+  });
+
   var ObjectCellEditor = Backgrid.Extension.ObjectCellEditor = Backgrid.CellEditor.extend({
     modalTemplate: _.template([
       '<div class="subnode-dialog" tabindex="1">',