Backgrid.js

Row

Customizing Row

Advanced Usage

A row is simply an intermediary view class that constructs the appropriate Cell class instances for rendering the model columns.

If you would like to override how a row is rendered, you may define your own Row subclass and give it to the Grid constructor as an option:

          // Suppose you want to highlight the entire row when an editable field is focused
          var FocusableRow = Backgrid.Row.extend({
            highlightColor: "lightYellow",
            events: {
              focusin: "rowFocused",
              focusout: "rowLostFocus"
            },
            rowFocused: function() {
              this.el.style.backgroundColor = this.highlightColor;
            },
            rowLostFocus: function() {
              delete this.el.style.backgroundColor;
            }
          });

          var grid = new Backgrid.Grid({
            row: FocusableRow, // <-- Tell the Body class to use FocusableRow to render rows.
            columns: [{
              //...
            }],
            collection: col
          });