Question

I’m trying to learn how to use a javascript based editable grid system with Django. It’s pretty confusing for someone brand new to javascript as well as ajax and json handling within django.

I’ve been looking at SlickGrid because it seems to do what I want it too, mainly editable fields that are quickly sorted, filtered, and searched. I’d be open to other packages with similar functionality.

I’m stuck on populating the grid with my json. I’m not even sure it’s the js or the format of the json which is the problem.

Here is a simplified example.

I’m ‘serving’ the json with the following view:

from django.core.serializers import serialize

def json_testing(request):
    json = serialize("json", FooBar.objects.all())
    return HttpResponse(json, mimetype='application/json')
# urls.py is configured to access this at /json_testing/

Here’s the output of the json at http://www.example.com/json_testing/ :

[
  - {
        pk: 1
        model: "myapp.foobar"
      - fields: {
            foo: "test"
            bar: "test"
        }
    },
  - {
        pk: 2
        model: "myapp.foobar"
      - fields: {
            foo: "test2"
            bar: "test2"
        }
    }
]    

And here’s my template:

{% extends 'base.html' %}
{% block head %}
<title>SlickGrid example 1: Basic grid</title>
<link rel="stylesheet" href="/static/SlickGrid/slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="/static/SlickGrid/css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="/static/SlickGrid/examples/examples.css" type="text/css" media="screen" charset="utf-8" />
{% endblock %}
{% block content %}
<div width="100%">
    <div id="myGrid" style="width:600px;height:500px;display:none;"></div>
</div>
<script src="/static/SlickGrid/lib/jquery-1.4.3.min.js"></script>
<script src="/static/SlickGrid/lib/jquery.event.drag-2.0.min.js"></script>
<script src="/static/SlickGrid/slick.core.js"></script>
<script src="/static/SlickGrid/slick.grid.js"></script>

<script type="text/javascript">
var grid;

var columns = [
    {id:"foo", name:"Foo", field:"foo"},
    {id:"bar", name:"Bar", field:"bar"}
];

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
};

$(function() {
    var data = [];
    for (var i = 0, i < 50; i++) {
        data[i] = {
            foo: "foo_" + i,
            bar: "bar_" + i,
        };
    }

// I want to replace the loop to generate code above with json
// I think something along the lines of this
//    $.get_json('/json_testing/')

    grid = new Slick.Grid("#myGrid", data, columns, options);

    $("#myGrid").show();
})
</script>
{% endblock %}

I know the answer to this is probably pretty basic. Maybe it’s so basic that’s why it’s hard to find an existing answer on the web.

Every method for loading the json that I’ve tried from other answers, blogs, etc has resulted in a blank grid being rendered. What do I need to do to get my json loaded?

Answer 1

After trying slickgrid and dojo & dojango, I ended up finally finding success with JQuery and django-jqgrid (although not without frustration).

While this is not an answer to the question, it was a solution to this problem for me. I say solution, not workaround, because I didn’t need slickgrid, just any editable grid.