Download Rico 2.0 for more demos.

AJAX DEMOS Inner Html Javascript Updater
 
 
 
 
 
  
DRAG & DROP DEMOS Simple Custom Draggable Custom Drop Zone
 
 
 
 
  
CINEMATIC DEMOS Animate & Effects Pull Down Round a Shape Color Example Rounded Corner Examples
 
 
  
BEHAVIOR DEMOS Accordion Weather Widget LiveGrid - Data Table
 
 
 
 
Select Search Category:
Search the Web:
Search Results
   
   
   
   
   
   
Important Note

Yahoo's public API limits us to 5000 searches per category in a 24 hour period. If you can limit your experimenting to 4 or 5 searches per category and limit the amount of scrolling to a reasonable amount, you will allow others to experiment with live data. Once we reach the threshold, we return canned data from previous searches. A note appears if we are using canned data.

Overview
The LiveGrid behavior takes an ordinary Html table and:
  • Connects it live to Ajax data requests
  • Creates a scrollbar that becomes the live data navigator for the table.
  • Automatically populates the data into the cells.
  • Employs data buffering and event compression strategies to improve performance.

In this demo, we connect three HTML tables (Web Search, Images Search and Videos Search) to the Yahoo Developer Web Services API with the LiveGrid behavior. We created a backend process that given a query will request a search from Yahoo. When the scrollbar is moved, the same backend process is called to retrieve more data. What you see is an alternative to the traditional paging (next/prev) model. With Ajax it is now possible to treat a grid like Google treated maps.

More Information

There are two blog entries we have written that discuss the LiveGrid.

One is a technical journalling about how the LiveGrid behavior was developed.

The other explores the user experience angle and whether its time to kill paging and use scrolling instead.