Backgrid.js

How do I write a cell that renders a button?

It is quite common to want to use a cell that acts on an entire row. You may want to pop up a modal, delete the row, or toggle editibility for all the columns. The possibilities are endless. For those cases, you can write a custom ActionCell, and then pass it to the column definition.

          var ActionCell = Backgrid.Cell.extend({
            events: {
              'click button': 'deleteRow'
            },
            deleteRow: function(e) {
              e.preventDefault();
              this.model.destory();
            },
            render: function () {
              this.$el.html('<button>-</button>');
              return this;
            }
          });

          var grid = new Backgrid.Grid({
            columns: [{
              ...
            }, {
              name: '',
              label: 'Action',
              cell: ActionCell
            }]
          });

How do I add a column of computed values?

The easiest way to do it is to extend your models from a Backbone.Model subclass that supports computed properties and accessing them via the same get/set interface. There are a number of Backbone plugins readily available for this. Should all else failed, you can roll your own fairly easily.

How do I add or remove a row?

You can either use Backbone.Collection#add or Grid#insertRow for insertion. Similarly, use Backbone.Collection#remove or Grid#removeRow to remove rows.

How do I put the grid in a default sorted state?

See the sorting programmatically section.

How do I validate user input?

See the validation section on Formatter.

How do I save my row changes to the server immediately?

          var MyModel = Backbone.Model.extend({
            initialize: function () {
              Backbone.Model.prototype.initialize.apply(this, arguments);
              this.on("change", function (model, options) {
              if (options && options.save === false) return;
                model.save();
              });
            }
          });

Where do I go to ask questions?

Finding an answer to your question about Backgrid is a simple 4-step process:

Ponder about the wisdom of your question and the answer you seek.
Search this document for the keywords you are looking for.
Pay your tribute to the almighty Google.
Go to StackOverflow or as a last resort, Github.

Does Backgrid.js support adaptive scrolling?

Some data grid widgets out there support a technique called adaptive scrolling, meaning the DOM elements will be swapped out of a viewport and new ones appended as the models are loaded from the server, thus keeping the memory more or less constant while providing an illusion to end-users that there's no limit to the number of rows the data grid can handle.

Backgrid.js has something better and achieves the same effect with much cleaner code - paginator extension, which uses backbone.paginator. The paginator supports both paging on the server-side, or preloading all the models and paging purely through the browser. Paginated Backgrid.Grid instances only render one page of DOM nodes at a time to save memory and keep your web page responsive.

Does Backgrid.js support function aggregates?

No, because it is not the goal of this project to produce a full-fledged web-based spreadsheet. However, doing aggregation is trivial using Underscore.js methods.

          // sum all the values of a column
          var sum = collection.reduce(function (accum, num) {
            return accum + num;
          });

If you use a Backbone plugin that supports computed values, you may also treat the computed values as a column as well.

Does Backgrid.js support multi-user editing?

Inside a Backgrid grid, every cell listens to the change event for its model value. The cells will rerender themselves during display mode upon changes in the model values. However, this functionality is only meant for synchronizing data automatically across multiple grids on the same page. If you are attempting to synchronize data changes across multiple processes, you will need some kind of a locking mechanism for the individual cells, Backgrid.js provides no help for that and you have to do this yourself. Implementing such web-based spreadsheet-like broker system is outside of the scope of this project, pull requests are welcome however.

Frequently Asked Questions