Search code examples
javascriptbackbone.jsbackgrid

Backbone > Backgrid input cell Placeholder issue

In my grid view,

I insert a new backbone model (model without id) at end of collection, which insert a new blank row in backgrid

I want to put placeholder in the first input cell of that blank row. I could not found the same in documentation but luckily i found in the code : https://github.com/wyuenho/backgrid/blob/master/lib/backgrid.js#L710

But this placeholder is being initalized when cell enters the edit mode.

why is this so??

Placeholder should be visible all the time and should be hidden only if focuses goes into that input cell.

But here in backgrid, exactly vice-verca is going on.

How to get rid of the issue?

I want to display placeholder all the time for the blank input Backgrid Cell. And hide only if that cell goes into edit mode.

Solution

  • Backgrid classes are designed to be extended.
    You can achieve the effect by extending the Backgrid.Cell and overriding the render function.

    Backgrid.PlaceholderCell = Backgrid.Cell.extend({

  className: "placeholder-cell",

  render: function () {
    this.$el.empty();
    var model = this.model;
    var value = this.formatter.fromRaw(model.get(this.column.get("name")), model);
    text = value || "PLACEHOLDER";
    this.$el.text(text);
    this.delegateEvents();
    return this;
  }

});

    jsFiddle: http://jsfiddle.net/bh5nd/