Question

I’m using Backbone along with jQuery and jqGrid and encountering problem with binding the backbone collection with jqGrid.

This is the Response I get from Server:

{"DogModel":[
    {"name":"Jane","breed":"Great Dane"},
    {"name":"Rocky","breed":"golden Retriver"},
    {"name":"Jim","breed":"Lab"}
]}

In View, I get the data like

[{"name":"Jane","breed":"Great Dane"},
{"name":"Rocky","breed":"golden Retriver"},
{"name":"Jim","breed":"Lab"}]

//jqGgrid code in view

jQuery("#dogsList").jqGrid({ 
    datatype: 'json',
    data:this.collection.models.toJSON(),
    width:'100%',
    colNames:['name', 'breed'], 
    colModel:[  
        {name:'name', align:'left'},
        {name:'breed', align:'left'}
    ],
    loadComplete : function(data) {
        alert('grid loading completed ' + data);
    },
    loadError : function(xhr, status, error)  {
        alert('grid loading error' + error);
    }
});

I tried replacing data:this.collection.models.toJSON(), with data:this.collection.models[0].toJSON() and data:this.collection.toJSON(), it throws unexpected character parse error.

What is that I need to do to bind the model to jqGrid?

Answer 1

I don’t know perfectly jqGrid but I look their examples and I found a solution to add the models on your grid.

You need to change your datatype to local and add manually each row on your jqGrid.

The best thing is to see the code work on jsFiddle and learn how the code works : http://jsfiddle.net/Atinux/qM98D/