Backgrid unable to render columns

Question

I am just learning the basics of backgrid.js. So when I attempt to replicate the code on the main page Backgrid.js, I am unable to render a grid due to a particular error when passing in an array of objects for the columns. I believe I am using proper format

 var columns = [
    { name: "name", label: "Name", cell: "string" },
    { name: "address", label: "Address", cell: "string" },
    { name: "tel", label: "Phone", cell: "integer" },
    { name: "email", label: "Email", cell: "string" },
    { name: "type", label: "Contact Type", cell: "string" }
];

The error Uncaught TypeError: Object [object Object] has no method 'listenTo' occurs in the process of initializing the grid at this step:

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

Is there an issue with how I am initializing the grid?

Can you post your HTML as well? – Dennis Rongo Feb 08 '13 at 21:17 — Dennis Rongo, Feb 08 '13 at 21:17

score 2 · Accepted Answer · answered Feb 11 '13 at 14:20

2

The issue was with the version of backbone.js I was using. I reccommend using the proper version of libraries.

Backgrid.js depends on 3 libraries to function:

jquery >= 1.7.0, underscore.js ~ 1.4.0, and backbone.js ~ 0.9.10.

answered Feb 11 '13 at 14:20

DJCrossman

31
4

score 0 · Answer 2 · answered Feb 08 '13 at 21:32

Here's a simple structure on how to use it.

HTML

<div id="container"></div>

JS

$(function(){
    /** Columns definition */
    var columns = [
    { name: "name", label: "Name", cell: "string" },
    { name: "address", label: "Address", cell: "string" },
    { name: "tel", label: "Phone", cell: "integer" },
    { name: "email", label: "Email", cell: "string" },
    { name: "type", label: "Contact Type", cell: "string" }
    ];

    /** Model instance */
    var mdl = Backbone.Model.extend({});

    /** Collection instance */
    var col = Backbone.Collection.extend({
        model: mdl  
    });

    /** Test array of JSON (usually coming from a server) */
    var json = [
        {"name": "Goose", "address": "a 1st address", "tel": 25500100, "email": "w@test.net","type": 1},
        {"name": "Ducky", "address": "a 2nd address", "tel": 25500123, "email": "w@test1.net","type": 2}
   ];

   /** Create the Grid */
   var grid = new Backgrid.Grid({
      columns: columns,
      collection: new col(json)
   });

   /** Add the Grid to the container */
   $("#container").append(grid.render().$el);
});

Unfortunately it doesn't appear to be a formatting issue. Using the given format. I still receive the same error (above) when initializing the grid when it attempts to call the `self.listenTo(column,"change:renderable",self.renderColumn)` function on line 1620. — DJCrossman, Feb 11 '13 at 14:06

Backgrid unable to render columns

2 Answers2