Ajax Grid Widget

Status: Official

Note: This document is a wiki translation of a mailing list post by Steve Bergman.

Using ajaxgrid is really quite simple. For first-timers, here is an easy example:

1. Quick start a project

tg-admin quickstart AutoComplete

2. Edit controllers.py

Edit controllers.py to look like the following:

#!python
import cherrypy
import turbogears
from turbogears import controllers, expose, redirect
from turbogears import identity
from turbogears.widgets import AjaxGrid
from datetime import datetime

grid = AjaxGrid(refresh_url="/search")

class Root(controllers.RootController):

  @expose(template=".templates.form")
  def index(self):
      return dict(form=grid)

  @expose(format="json")
  def search(self):

       # Fake a row of results
       date = datetime.today()
       hour = date.strftime('%H')
       minute = date.strftime('%M')
       second = date.strftime('%S')

       return dict(
           headers = ["Hour", "Minute", "Second"],
           rows = [[hour, minute, second]],
  )

3. Create the template

Create the template form.kid and make it look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://purl.org/kid/ns#"
    py:extends="'master.kid'">
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type"
py:replace="''"/>
  <title>Ajaxgrid Example</title>
</head>
  <body>
    <span py:content="form.display()"></span>
  </body>
</html>

4. Try it out

Start your project and try it out. You should get a single row with the current hour, minute, and second.

It should update when you click 'Update'.


The comment feature has been disabled on this page due to heavy spamming. If you want to comment on the contents of this page, if you have questions, or want to report an error, please write to the TurboGears mailing list.

Past comments:

localhost
2007-03-11 07:19:09

An example which shows usage with sqlobjects would be nice .

localhost
2007-05-13 13:41:12

Nice example, thanks. How do you pass a parameter to the corresponding refresh_url method? Possibly coming from another wideget in the form, say a SelectList.

1.0/AjaxGrid (last edited 2007-06-17 16:56:09 by ChristopherArndt)