1) Edit cellEditing function, in some cases grid object is undefined.

2) Modify SubNodeCollectionControl, so that user can pass custom backgrid row.
3) Handling of visible parameter in SubNodeCollectionControl.
4) Customise title and delete message for Delete Cell.
5) Added Backgrid.Extension.Select2DepCell and moved Backgrid.Extension.StringDepCell from user management to backgrid.pgadmin.js.

web/pgadmin/static/js/backform.pgadmin.js

@@ -1023,16 +1023,16 @@
 
       var collection = this.model.get(data.name);
 
-      var cellEditing = function(args){
+      var cellEditing = function(args) {
-        var self = this,
+        var that = this,
           cell = args[0];
         // Search for any other rows which are open.
         this.each(function(m){
           // Check if row which we are about to close is not current row.
           if (cell.model != m) {
-            var idx = self.indexOf(m);
+            var idx = that.indexOf(m);
             if (idx > -1) {
-              var row = grid.body.rows[idx],
+              var row = self.grid.body.rows[idx],
                   editCell = row.$el.find(".subnode-edit-in-process").parent();
               // Only close row if it's open.
               if (editCell.length > 0){
@@ -1054,7 +1054,7 @@
       });
 
       // Render subNode grid
-      subNodeGrid = grid.render().$el;
+      subNodeGrid = self.grid.render().$el;
 
       // Combine Edit and Delete Cell
       if (data.canDelete && data.canEdit) {
@@ -1072,7 +1072,7 @@
                             data.canAddRow.apply(self, [self.model]) : true;
           if (canAddRow) {
               // Close any existing expanded row before adding new one.
-              _.each(grid.body.rows, function(row){
+              _.each(self.grid.body.rows, function(row){
                 var editCell = row.$el.find(".subnode-edit-in-process").parent();
                 // Only close row if it's open.
                 if (editCell.length > 0){
@@ -1101,7 +1101,7 @@
                 }
               }
 
-              $(grid.body.$el.find($("tr.new"))).removeClass("new")
+              $(self.grid.body.$el.find($("tr.new"))).removeClass("new")
               var m = new (data.model) (null, {
                 silent: true,
                 handler: collection,
@@ -1112,7 +1112,7 @@
               collection.add(m);
 
               var idx = collection.indexOf(m),
-                  newRow = grid.body.rows[idx].$el;
+                  newRow = self.grid.body.rows[idx].$el;
 
               newRow.addClass("new");
               $(newRow).pgMakeVisible('backform-tab');
@@ -1150,6 +1150,7 @@
   });
 
   var SubNodeCollectionControl = Backform.SubNodeCollectionControl = Backform.Control.extend({
+    row: Backgrid.Row,
     render: function() {
       var field = _.defaults(this.field.toJSON(), this.defaults),
           attributes = this.model.toJSON(),
@@ -1180,6 +1181,12 @@
       // Show Backgrid Control
       grid = (data.subnode == undefined) ? "" : this.showGridControl(data);
 
+      // Clean up first
+      this.$el.removeClass(Backform.hiddenClassname);
+
+      if (!data.visible)
+        this.$el.addClass(Backform.hiddenClassname);
+
       this.$el.html(grid).addClass(field.name);
       this.updateInvalid();
 
@@ -1247,7 +1254,9 @@
             name: "pg-backform-delete", label: "",
             cell: Backgrid.Extension.DeleteCell,
             editable: false, cell_priority: -1,
-            canDeleteRow: data.canDeleteRow
+            canDeleteRow: data.canDeleteRow,
+            customDeleteMsg: data.customDeleteMsg,
+            customDeleteTitle: data.customDeleteTitle
           });
       }
 
@@ -1304,6 +1313,7 @@
       var grid = self.grid = new Backgrid.Grid({
           columns: gridSchema.columns,
           collection: collection,
+          row: this.row,
           className: "backgrid table-bordered"
       });
 

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

@@ -2,13 +2,13 @@
   // Set up Backform appropriately for the environment. Start with AMD.
   if (typeof define === 'function' && define.amd) {
     define([
-      'underscore', 'jquery', 'backbone', 'backform', 'backgrid', 'alertify',
+      'sources/gettext', 'underscore', 'jquery', 'backbone', 'backform', 'backgrid', 'alertify',
       'moment', 'bignumber', 'bootstrap.datetimepicker'
     ],
-     function(_, $, Backbone, Backform, Backgrid, Alertify, moment, BigNumber) {
+     function(gettext, _, $, Backbone, Backform, Backgrid, Alertify, moment, BigNumber) {
       // Export global even in AMD case in case this script is loaded with
       // others that may still expect a global Backform.
-      return factory(root, _, $, Backbone, Backform, Alertify, moment, BigNumber);
+      return factory(root, gettext, _, $, Backbone, Backform, Alertify, moment, BigNumber);
     });
 
   // Next for Node.js or CommonJS. jQuery may not be needed as a module.
@@ -19,13 +19,13 @@
       Backform = require('backform') || root.Backform;
       Alertify = require('alertify') || root.Alertify;
       moment = require('moment') || root.moment;
-    factory(root, _, $, Backbone, Backform, Alertify, moment);
+    factory(root, gettext, _, $, Backbone, Backform, Alertify, moment);
 
   // Finally, as a browser global.
   } else {
-    factory(root, root._, (root.jQuery || root.Zepto || root.ender || root.$), root.Backbone, root.Backform);
+    factory(root, root.gettext, root._, (root.jQuery || root.Zepto || root.ender || root.$), root.Backbone, root.Backform);
   }
-} (this, function(root, _, $, Backbone, Backform, Alertify, moment, BigNumber) {
+} (this, function(root, gettext, _, $, Backbone, Backform, Alertify, moment, BigNumber) {
   /*
      * Add mechanism in backgrid to render different types of cells in
      * same column;
@@ -380,7 +380,8 @@
 
   var DeleteCell = Backgrid.Extension.DeleteCell = Backgrid.Cell.extend({
       defaults: _.defaults({
-        defaultDeleteMsg: 'Are you sure you wish to delete this row?'
+        defaultDeleteMsg: gettext('Are you sure you wish to delete this row?'),
+        defaultDeleteTitle: gettext('Delete Row')
       }, Backgrid.Cell.prototype.defaults),
 
       /** @property */
@@ -399,8 +400,10 @@
         if (canDeleteRow) {
           var delete_msg = !_.isUndefined(this.column.get('customDeleteMsg')) ?
                            this.column.get('customDeleteMsg'): that.defaults.defaultDeleteMsg;
+          var delete_title = !_.isUndefined(this.column.get('customDeleteTitle')) ?
+                           this.column.get('customDeleteTitle'): that.defaults.defaultDeleteTitle;
           Alertify.confirm(
-            'Delete Row',
+            delete_title,
             delete_msg,
             function(evt) {
               that.model.collection.remove(that.model);
@@ -1378,6 +1381,58 @@
 
   _.extend(MomentCell.prototype, MomentFormatter.prototype.defaults);
 
+
+  Backgrid.Extension.StringDepCell = Backgrid.StringCell.extend({
+      initialize: function() {
+        Backgrid.StringCell.prototype.initialize.apply(this, arguments);
+        Backgrid.Extension.DependentCell.prototype.initialize.apply(this, arguments);
+      },
+      dependentChanged: function () {
+        this.$el.empty();
+
+        var self = this,
+            model = this.model,
+            column = this.column,
+            editable = this.column.get("editable");
+
+        this.render();
+
+        is_editable = _.isFunction(editable) ? !!editable.apply(column, [model]) : !!editable;
+        setTimeout(function() {
+          self.$el.removeClass("editor");
+          if (is_editable){ self.$el.addClass("editable"); }
+          else { self.$el.removeClass("editable"); }
+        }, 10);
+
+        this.delegateEvents();
+        return this;
+      },
+      remove: Backgrid.Extension.DependentCell.prototype.remove
+    });
+
+  Backgrid.Extension.Select2DepCell = Backgrid.Extension.Select2Cell.extend({
+    initialize: function() {
+      Backgrid.Extension.Select2Cell.prototype.initialize.apply(this, arguments);
+      Backgrid.Extension.DependentCell.prototype.initialize.apply(this, arguments);
+    },
+
+    dependentChanged: function () {
+      var model = this.model;
+      var column = this.column;
+      editable = this.column.get("editable");
+
+      this.render();
+
+      is_editable = _.isFunction(editable) ? !!editable.apply(column, [model]) : !!editable;
+      if (is_editable){ this.$el.addClass("editable"); }
+      else { this.$el.removeClass("editable"); }
+
+      this.delegateEvents();
+      return this;
+    },
+    remove: Backgrid.Extension.DependentCell.prototype.remove
+  });
+
   return Backgrid;
 
 }));

web/pgadmin/tools/user_management/templates/user_management/js/user_management.js

@@ -25,34 +25,7 @@ define([
             // How long to wait after typing has stopped before searching can start
             wait: 150
           }));
-        },
+        }
-        StringDepCell = Backgrid.StringCell.extend({
-          initialize: function() {
-            Backgrid.StringCell.prototype.initialize.apply(this, arguments);
-            Backgrid.Extension.DependentCell.prototype.initialize.apply(this, arguments);
-          },
-          dependentChanged: function () {
-            this.$el.empty();
-
-            var self = this,
-              model = this.model,
-              column = this.column,
-              editable = this.column.get("editable");
-
-            this.render();
-
-            is_editable = _.isFunction(editable) ? !!editable.apply(column, [model]) : !!editable;
-            setTimeout(function() {
-              self.$el.removeClass("editor");
-              if (is_editable){ self.$el.addClass("editable"); }
-              else { self.$el.removeClass("editable"); }
-            }, 10);
-
-            this.delegateEvents();
-            return this;
-          },
-          remove: Backgrid.Extension.DependentCell.prototype.remove
-        });
 
     pgBrowser.UserManagement  = {
       init: function() {
@@ -83,7 +56,7 @@ define([
             schema: [
             {
               id: 'email', label: gettext('Email'), type: 'text',
-              cell:StringDepCell, cellHeaderClasses:'width_percent_30',
+              cell: Backgrid.Extension.StringDepCell, cellHeaderClasses: 'width_percent_30',
               deps: ['id'],
               editable: function(m) {
                 if(m instanceof Backbone.Collection) {