Select2Cell

• Backgrid.Extension.Select2Cell
• Backgrid.Extension.Select2CellEditor

---

Best Used On

• Desktop
• Mobile

Download

When to Use

When you have a relatively large number of available options for a column, or want to use a select box with autocomplete capability.

Prerequisites

Select2Cell uses the Select2 jQuery plugin to render its select box. Select2Cell is tested with Select2 version 3.4.5.

Usage

Select2Cell is a very simple extension of the default SelectCell. You can configure individual instances by supplying a select2Options object hash during extension, in addition to the options SelectCell supports.

var data = new Backbone.Collection([{number: 5, another: 1}]); // Just like SelectCell, Select2Cell supports option lists and groups var numbers = [{name: 10, values: [ [1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10] ]}]; var MySelect2Cell = Backgrid.Extension.Select2Cell.extend({ // any options specific to `select2` goes here select2Options: { // default is false because Backgrid will save the cell's value // and exit edit mode on enter openOnEnter: false }, optionValues: numbers, // since the value obtained from the underlying `select` element will always be a string, // you'll need to provide a `toRaw` formatting method to convert the string back to a // type suitable for your model, which is an integer in this case. formatter: _.extend({}, Backgrid.SelectFormatter.prototype, { toRaw: function (formattedValue, model) { return formattedValue == null ? [] : _.map(formattedValue, function (v) { return parseInt(v); }) } }) }); var grid = new Backgrid.Grid({ columns: [{ name: "number", cell: MySelect2Cell.extend({ multiple: true }) }, { name: "another", cell: MySelect2Cell }], collection: data }); $("#select2-cell-example-result").append(grid.render().el);

Result

Getting data for optionValues

The Select2Cell and its superclass SelectCell assumes that the data for the select box will have been loaded before the grid is rendered. As a consequence of this design decision, select's ability to load its options dynamically is rendered useless.

The reason for this design is when the cell is in display mode, it needs to render a label, not its database ID value, so the data will have been already loaded even before the Select2CellEditor goes into effect.

To keep your optionValues fresh, you can try one of the following approaches:

var SynchronousSelect2Cell = Select2Cell.extend({ // Cached the last fetched option values _optionValues: null, // Records the time since the last fetch lastUpdated: null, // Max time ellapsed allowed since the last fetch. // 5 minutes in miniseconds in this case. maxTimeSinceLastUpdate: 300000, // Fetches the option values synchronously if they have gone stale, // otherwise return the last fetched results. optionValues: function () { var self = this; if (this.lastUpdate == null || (new Date()).getTime() - this.lastUpdate >= this.maxTimeSinceLastUpdate) { $.ajax({ async: false, url: "http://www.example.com/data.json", }).done(function (data) { self._optionValues = data; self.lastUpdated = (new Date()).getTime(); }); } return self._optionValues; } }); var AsynchronousSelect2Cell = Select2Cell.extend({ _optionValues: [/* ... pre-populate initial option values here */], updateInterval: 300000, fetching: false, optionValues: function () { var self = this; // Updates the option values in the background periodically to maintain freshness setInterval(function () { self.fetching = true; $.get("http://www.example.com/data.json").done(function (data) { self._optionValues = data; self.fetching = false; }); }, self.updateInterval); // poor man's semaphore while (self.fetching) {} return self._optionValues; } });