Backgrid catching a select-all events

Question

(Let me preface with I am new to Backbone and Backgrid.) I am using Backgrid and select-all extension and I was having issues "catching" the event that the select all fires in my containing/parent view. I want to show a details view when a row is selected in the master grid. So, I need the select event in the grid to bubble up to the parent view so it can show the details in another view.

var view = Backbone.View.extend({
    el: '.grid',
    initialize: function () {

        var columns = [{
            name: "id",
            label: "ID",
            editable: false,
            cell: "string"
        }, {
            name: "",
            label: "Action",
            cell: "select-row"
        }];

        var grid = new Backgrid.Grid({
            columns: columns,
            collection: this.collection
        });

        $("#backgrid").append(grid.render().$el);
    });
});

Now I am thinking I want to add something like this to the view

events: {
"backgrid:select": "<name of the function i want to call>"
}

But that doesn't seem to work. Any help would be appreciated.

i don't understand which is the element that should trgger the event. the "grid" object? — Daniele B, Jun 06 '13 at 10:34
@Sushanth--"backgrid:select" is the name of the event that is being triggered in select-all extension via some code splunking (although it doesn't appear to bubble up to the containing view). I was using that as an example event name. — Dan, Jun 10 '13 at 14:14
@Daniele B the column "Action" is using the backgrid extension select-all. the cell type "select-row" puts a checkbox into the grid. I am having issues getting the event to fire from the checkbox and have it bubble up to the containing view — Dan, Jun 10 '13 at 14:16
I was able to answer my own question...in the view add....this.collection.on('backgrid:selected', function(model, selected) { //do what i need here }); — Dan, Jun 10 '13 at 15:36
@Dan great! You can then answer your own question: it will be useful for future users with the same problem. — Daniele B, Jun 11 '13 at 06:13

score 5 · Accepted Answer · edited Aug 11 '14 at 11:00

I was able to answer my own question...in the view add....

this.collection.on('backgrid:selected', function(model, selected) { 
   //do what i need here 
});

backgrid is already triggering the event backgrid:select (which is handled via the model) but it also triggers the event backgrid:selected which bubbles up in the collection...which in turn is accessible via the parent view.

A reference to the official API documentation pointing this out can be found here

Backgrid catching a select-all events

1 Answers1