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.
In this how-to I'll show you how to make a skeleton static HTML page with the initial grid code.
- When using dhtmlx components Firefox extension - Firebug comes really handy. You will be able to debug the app, and track it execution stages.
- Download the GPL version: dhtmlxGrid.zip
- Extract the archive to empty folder (I extracted everything to a subfolder dhtmlxGrid)
- To use dhtmlx grid (or other component) you have to create a initialization function that will put and configure the grid in a selected place on the page. A simple code that does the job would look like this: In HEAD we add CSS and JS files for the grid, and then we define doInitGrid function, which will create the grid. In this function you can configure the grid as you like. This example doesn't has any rows in it yet.
- To load data from XML document we just have to add in doInitGrid function: Where dane.xml is the file with data.
- The XML document has this type of structure: Every row has unique ID and a set of cells with values. You can run this example on a server (like localhost apache).
- The grid supports sorting, filtering, loading data from big datasets and more. But most of this requires some server-side code that will respond to grid requests. Using this skeleton code we can star making real apps that use grid to display data from database.
dhtmlxGrid and DjangoThere 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:
- Create Django project and app:
django-admin.py startproject grid python manage.py startapp testgrid
- Edit database settings (I used SQLite), add "testgrid" to INSTALLED_APPS.
- Create app model: This is basic 5-column row.
- Copy all the static files - dhtmlxGrid folder to site_media folder
- Copy the HTML file with the skeleton code to templates folder (templates) as show_grid.html and the dane.xml as get_data.xml. We will use them in two views - one to show the grid, and second one to return the data for the grid.
- This is the initial view code: The get_data.xml template we change to: And in show_grid.html we change the static files path as well as the XML data file path:
- So we have two working views. I've made also a script spawn.py for generating some rows: When you spawn some rows and open the app in a browser you will see first 20 rows.
Dynamic row loadingGrid 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.
- To grid init function add:
- Modify "rows" tag in template get_data.xml:
- Add to show_grid.html:
- Change view get_data into: The grid will now load new rows on request when you will be scrolling it.
dataprocessor for row editingDHTMLX 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:
- Add to show_grid.html: Add to doInitGrid:
- To the same template add JS function that will handle database errors:
- The row update is handled by new view update_data:
- Template update_data.xml looks like:
- update_data_error.xml looks like: