Merge pull request #605 from JoeGaebel/emptyView-colspan-fix

Add dynamic colspan updating to emptyRow

Author: wyuenho

src/body.js

@@ -59,15 +59,19 @@ var Body = Backgrid.Body = Backbone.View.extend({
     this.listenTo(collection, "reset", this.refresh);
     this.listenTo(collection, "backgrid:sort", this.sort);
     this.listenTo(collection, "backgrid:edited", this.moveToNextCell);
+
+    this.listenTo(this.columns, "add remove", this.updateEmptyRow);
   },
 
   _unshiftEmptyRowMayBe: function () {
     if (this.rows.length === 0 && this.emptyText != null) {
-      this.rows.unshift(new EmptyRow({
+      this.emptyRow = new EmptyRow({
         emptyText: this.emptyText,
         columns: this.columns
-      }));
-      return true;
+      });
+      
+      this.rows.unshift(this.emptyRow);
+      return true
     }
   },
 
@@ -173,6 +177,17 @@ var Body = Backgrid.Body = Backbone.View.extend({
     return this;
   },
 
+  /**
+     Rerender the EmptyRow which empties the DOM element, creates the td with the
+     updated colspan, and appends it back into the DOM
+  */
+
+  updateEmptyRow: function () {
+    if (this.emptyRow != null) {
+      this.emptyRow.render();
+    }
+  },
+
   /**
      Reinitialize all the rows inside the body and re-render them. Triggers a
      Backbone `backgrid:refresh` event from the collection along with the body

test/body.js

@@ -224,6 +224,23 @@ describe("A Body", function () {
     expect(body.$el.find("tr.empty > td").attr("colspan")).toBe("1");
   });
 
+  it("will update the colspan of the empty row as columns are changed", function () {
+    col.reset();
+    body = new Backgrid.Body({
+      emptyText: " ",
+      columns: [{
+        name: "id",
+        cell: "integer"
+      }],
+      collection: col
+    });
+    body.render();
+
+    expect(body.$el.find("tr.empty > td").attr("colspan")).toBe("1");
+    body.columns.push({name: "age", cell: "integer"});
+    expect(body.$el.find("tr.empty > td").attr("colspan")).toBe("2");
+  });
+
   it("will clear the empty row if a new model is added to an empty collection", function () {
     col.reset();
     body = new Backgrid.Body({
@@ -270,6 +287,13 @@ describe("A Body", function () {
     expect(body.$el.find("tr.empty").length).toBe(1);
   });
 
+  it("won't call render from updateEmptyRow if there is no emptyView", function () {
+    var pushColumn = function () {
+      body.columns.push({name: "age", cell: "integer"});
+    };
+    expect(pushColumn).not.toThrow();
+  });
+
   it("#sort will throw a RangeError is direction is not ascending, descending or null", function () {
     body = new Backgrid.Body({
       collection: col,