Monday, August 4th, 2008

Django and ExtJS Grids with Filters

Category: Python, Sencha

Are you an ExtJS and Django user? If so, you will want to check out this article by Matt of Tangible Worldwide on Using ExtJS’s Grid Filtering with Django.

He goes into detail on how to tweak the grid filtering system that is aimed at PHP, and getting it to work in a way that allows you to write this Django code:

  1. # take a ContentType model name (say, from the URL)
  2. # and create a QuerySet
  3. ctype = ContentType.objects.get(model=ctype_model)
  4. model_class = ctype.model_class()
  5. obj_qs = model_class.objects.filter()
  6.  
  7. # 'q' is the set of POSTed filtering parameters
  8. filter_params = request.POST.get('q', '[]')
  9.  
  10. # decode the filtering parameters w/ simplejson
  11. filter_params = simplejson.loads(filter_params)
  12.  
  13. # apply the filtering params
  14. filtered_qs = get_queryset_from_ext_filters(obj_qs, filter_params)

ExtJS 2.1 saw inclusion of the popular (at least in my world) user extension for AJAX filtering of data by grid columns. As useful as this is (provided you can abide by the GPL or paid licensing options), the filter parameters serialized as a PHP array, which is not particularly useful for other languages. With a quick modification to the grid filtering serialization method and a helper function for Django, we can rewire the system to send a JSON string that Django can use to directly apply filtering to a QuerySet. I’ve found that most clients love having this sort of command and flexibility over their data — especially the kind that don’t necessarily realize that this visualization and control exists. I like that. Additionally, the amount of work and code required is minimal, and the code both reusable and straight-forward. I like that, too.

There are 4 steps to this process:

  1. Modify the serialization method in GridFilters.js
  2. Set up the helper function that will process the QuerySet with the grid filter parameters
  3. Slightly customize your models (see below)
  4. Add (simple) helper code to your Ajax view

Posted by Dion Almaer at 10:38 am
Comment here

++++-
4.1 rating from 73 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.