Tutorial Django Dojo DataGrid

Dojo is an open source Javascript toolkit. It provides an easy way to access and modify the DOM as well as a rich user interface widget library. One of the most powerful widgets in the Dojo toolkit is DataGrid. It provides an easy way to represent what is essentially a cross between a spreadsheet and a table. In a recent Django project I needed to output the contents of a model into the DataGrid. Thanks to django-dojoserializer this is very easy.

Setup

We need the Python package django-dojoserializer. This can be installed by downloading the source and running

python setup.py install

or with setuptools using

easy_install django-dojoserializer

or with pip using

pip install django-dojoserializer

Then add django-dojoserializer to the INSTALLED_APPS tuple in settings.py.

Dojo will need to be linked correctly in the Django template. We need to require the dojox.grid.DataGrid and dojo.data.ItemFileReadStore classes.

<script src="/static/libs/dojo/dojo.js" djConfig="parseOnLoad: true">%lt;/script>
<script type="text/javascript">
dojo.require('dojox.grid.DataGrid');
dojo.require('dojo.data.ItemFileReadStore');
</script>

Django Model

PROXY_TYPE_CHOICES = (

	('SOCKS4', 'SOCKS4'),
	('SOCKS5', 'SOCKS5'),
	('HTTP', 'HTTP'),

)

class Proxy(models.Model):
	ip = models.CharField(max_length=50)
	type = models.CharField(max_length=6, choices=PROXY_TYPE_CHOICES)
	alive = models.BooleanField(default=False)
	added = models.DateTimeField(auto_now=False, auto_now_add=True)
	last_checked = models.DateTimeField(auto_now=True, auto_now_add=False)

	def __unicode__(self):
		return self.ip

Django View

The view needs to display data from our model as JSON which is correctly formatted for the Dojo DataTable. Simply encoding the Django queryset as a JSON object would not work. Thankfully django-dojoserializer provides the dojoserializer.serialize() method which correctly formats our the queryset in a format the DataTable can read. The route /render/proxies maps to the following view:

from django.http import HttpResponse
from proxies.models import Proxy
from dojoserializer import serialize

def render_json(request):

	proxies = Proxy.objects.filter(alive=True)

	json_data = serialize(proxies)

	return HttpResponse(json_data, mimetype="application/json")

This gives the following output:

Defining the DataTable

We define the Dojo DataTable in two parts. The first is a Javascript representation of the structure of the DataTable, the second part is a <div> for where the DataTable will sit in markup. Note that each field attribute is the exact name of the corresponding field from the Django model. If the names do match the data will not display in the table.

var layoutProxies = [
            [{
                field: "ip",
                name: "IP",
                width: 'auto'
            },
            {
                field: "type",
                name: "Type",
                width: 'auto'
            },
            {
                field: "last_checked",
                name: "Last Checked",
                width: 10
            },
            {
                field: "alive",
                name: "Alive",
                width: 'auto'
            }

            ]];

Note the structure attribute of the div is set to the value of our structure. We will define proxyStore, the value of the store attribute below.

<div id="proxyGrid" dojoType="dojox.grid.DataGrid" store="proxyStore" structure="layoutProxies" query="{}" rowsPerPage="40"></div>

Connecting the DataTable to The Proxy Data

Finally we need to specify the proxyStore variable for the table to pull its data from. proxyStore is an instance of dojo.data.ItemFileReadStore(). We pass the URL of our JSON file and set urlPreventCache to true.

proxyStore = new dojo.data.ItemFileReadStore({url: '/render/proxies', urlPreventCache: true});

Which gives the final product: