RkBlog

Hardware, programming and astronomy tutorials and reviews.

Using DHTMLXgrid in a Django application

DHTMLX grid is a complete grid solution for browsing and editing grid like, spreadsheet like data from various sources. This tutorial will show you how to connect server-side Django views with client-side xgrid features.

DHTML eXtensions (DHTMLX) is a set of JavaScript widgets/frontend UI elements such as trees, grids, comboboxes, windows etc. On the project web page you will find all components. DHTMLX offers GPL version, and paid commercial one with more features and with support. The components offer out of the box complete solutions - like dhtmlx grid can load partial data on requests from large datasets, edit data and so on.

dhtmlxGrid

dhtmlxGrid is a JavaScript frontend for displaying table like, spreadsheet like data. It can read data from formats like XML, JSON, CSV. For more details check the documentation and examples.

grid1

dhtmlxGrid quickstart

In this how-to I'll show you how to make a skeleton static HTML page with the initial grid code.

dhtmlxGrid and Django

There is no special problems or issues when using dhtmlx components with Django, GAE or other Python tools. One thing to remember that XML documents returned to the grid have to have correct MIME. If you use render_to_response, then just add:
mimetype='text/xml'
So now we will make very basic Django application with dynamic loading of data and row editing.

Dynamic row loading

Grid can load rows in parts on request. When you have thousands or millions of rows - this allows you to browse them without killing the servers. xgrid can load rows on requests requesting data URL - /get_data/ with two GET variables: posStart i count. First one is offset and second one is the quantity of rows grid needs.
grid3

dataprocessor for row editing

DHTMLX has also dataprocessor component which connects client-side actions like row edition with server-side actions. We can use it to save changes in edited row. Dataprocessor will send ajax request to given URL with data as GET variables, for example:
?gr_id=6&c0=abc&c1=dsdsd&c2=6&c3=1234&c4=this%20is%20Sparta!
Where gr_idis the row ID and c0-c* are the cell values. Our example app is ready

Source Code

RkBlog

12 December 2009;

Comment article