Backbone > Backgrid input cell Placeholder issue

Question

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.

burtyish · Accepted Answer · 2014-06-16T15:12:30.117

3

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/

edited Jun 16 '14 at 15:12

answered Jun 13 '14 at 07:19

burtyish

1,033
2
13
27

This is ok, but when user will enter the cell to edit the value he will have to first remove (backspaces) the 'PLACEHOLDER' then he will type his text. That's not the way what placeholder does. – codeofnode Jun 13 '14 at 09:28
No, that's not right. I've updated the code and added a working example. – burtyish Jun 14 '14 at 18:47
your answer is very good.. but just i would like to know.. what does this placeholder does which backgrid implements by default at this line https://github.com/wyuenho/backgrid/blob/master/lib/backgrid.js#L710.. This seems to use no any patches... It could provide a pure placeholder as we see in other basic input html element. and we can pass the custom placeholder while sending options to the Backgrid.Grid – codeofnode Jun 16 '14 at 05:51
@Koka, that's the [placeholder attribute](http://davidwalsh.name/html5-placeholder) of the input field. The input field is only rendered once the cell goes into edit mode, which is what the OP is complaining about. – burtyish Jun 16 '14 at 08:53
@Koka You can see an example of the input field placeholder in action in [backgrid's moment-cell documentation](http://backgridjs.com/ref/extensions/moment-cell.html). Edit the value in the ```datetime``` column and delete the default value. – burtyish Jun 16 '14 at 09:03

Backbone > Backgrid input cell Placeholder issue

1 Answers1