Backgrid template not rendering Backgrid.Cell.Extend

Question

I'm new to this website so forgive me if I'm getting this wrong, but I found the question/answer below and have tried to incorporate it into my own code but I'm having problems with the template being rendered.

How to implement delete per row for backgrid

Very similar to the above I am trying to display a Bootstrap Glyph icon in a Backgrid column to allow a user to delete a row, this is what I have:

    //My custom DeleteCell
    var DeleteCell = Backgrid.Cell.extend({
        template: _.template('<span class=\"glyphicon glyphicon-home\"></span>'),
        events: {
          click: "deleteRow"
        },
        deleteRow: function (e) {
          e.preventDefault();
          this.model.collection.remove(this.model);
        },
        render: function () {
          this.el.html = this.template();
          this.delegateEvents();
          return this;
        }
    });

Then when I initialise the grid, I have the following:

       function createBackgrid(collection){
        var columns = [
        {
            name: "id", // The key of the model attribute
            label: "Delete", // The name to display in the header
            editable: false, 
            cell: DeleteCell
        }, ...

The grid displays fine with the data in each of the columns, however the first column that should display my delete icon is blank. If I click in cell then the row is removed correctly from the model.

As with the previous question I have also tried _.template('<button>Delete</button>') but I get the same result.

Although I've been coding for years, web based development is new to me and I'm going through crash courses on Bootstrap, Angular, Backbone and Backgrid. I'd be grateful for any support or advice here.

Thanks Lee

Answer 1

Ok, so I figured this out - a little more perseverance was required!

By changing the render() function to

render: function () {
          this.el.innerHTML = this.template();
          this.delegateEvents();
          return this;
        }

I was able to get the icon displayed correctly. Clearly the days of ASP 1.0 are long gone, that was the last time I did any real web development! :-)

Maybe this will help someone else in a similar position?!

Cheers, Lee