Backgridjs

SelectAll

When to Use

When you want to select multiple models at a time for batch operations.

Usage

To enable the SelectAll extension, you simply have to add a new column to your column definition like so:

          var grid = new Backgrid.Grid({
            columns: [{

              // name is a required parameter, but you don't really want one on a select all column
              name: "",

              // Backgrid.Extension.SelectRowCell lets you select individual rows
              cell: "select-row",

              // Backgrid.Extension.SelectAllHeaderCell lets you select all the row on a page
              headerCell: "select-all",

            }, {
              name: "id",
              label: "ID",
              cell: "string",
              editable: false
            }, {
              name: "name",
              label: "Territory",
              cell: "string"
            }],

            collection: new Backbone.Collection([
              {"name": "Afghanistan", "id": 1},
              {"name": "Albania", "id": 2}
            ])
          });

          $("#select-all-example-1-result").append(grid.render().el);

You can also use this extension in concert with Backbone.PageableCollection. In which case SelectAll will select across all pages by default, whether the PageableCollection is in server, client or infinite mode. See this example.

Manipulating Selections Programatically

At any point during the lifetime of your program, if you'd like to get an array of the currently selected models after you've rendered your grid, you can easily do so:

          // This method is only available on Backgrid.Grid after you've
          // include the SelectAll extension.
          var selectedModels = grid.getSelectedModels();

          // To deselect selected models
          grid.clearSelectedModels();

          // Selecting even numbered rows
          grid.collection.each(function (model, i) {
            if (i % 2 == 0) model.trigger("backgrid:select", model, true);
          });

Pro Tip

Each SelectRowCell will trigger a backgrid:selected event directly from the selected models when its checkbox value changes, so if you want to react to those events, you can attach your event handlers on the collection.

See the API documentation for details.

SelectAll

Events

Best Used On

When to Use

Usage

Result

Manipulating Selections Programatically