• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Browse and search Google Drive and Gmail attachments (plus Dropbox and Slack files) with a unified tool for working with your cloud files. Try Dokkio (from the makers of PBworks) for free. Now available on the web, Mac, Windows, and as a Chrome extension!



Page history last edited by Jörn Zaefferer 9 years, 10 months ago

Note: This page is here for historic reasons, the actual information is outdated. See Grid-SPF and Grid-Editing for the actual APIs.


4/5/2011 -- I've refactored and built out a better set of samples (over DataSourceSample.html below).  Find these at: http://brado23.github.com/jquery-ui/grid-datamodel2/Default.html.

These samples are meant to be stepped through in your JS debugger, to see the various uses of the "data source" prototype that we've been discussing.


Here is a link to the "data source" prototype we've been discussing over the last couple weeks. 

Both UI and non-UI controls (like a pager) can use this as an API to do loading/paging/sorting/filtering over local and remote data.




This is not a classic request/response API.  Rather, the "data source" manages the contents of the array of data objects to which it is bound, across multiple data read/write operations.

Control or app code will dynamically manipulate query options on the "data source" and call "refresh" on the "data source".

This "refresh" will cause the data source to update the contents of the array to which it is bound.


With the separation between "data source" and its array of data objects, jQuery data-linking can relate merely to the array of data objects and can be appropriately unaware of any additional data abstraction.

With in-development enhancements to data-linking, the "data source" should support CUD by listening to both array- and property-changed events, translating these into POSTs.


This separation of "data source" from array of data objects has the additional benefit of allowing for a somewhat declarative app construction pattern. 

Notice in the sample that binding between control and data happens at the same, top-level JavaScript scope -- and not in some request/response callback from a data fetch.


The "data source" API itself deserves reworking.  I selected the jQuery validator pattern of returning a non-jQuery "data source" object, allowing for fluent chaining of calls on the "data source".

Folks have expressed a desire to change to the jQuery UI pattern of not introducing a non-jQuery object.

Current data model prototype: https://github.com/jquery/jquery-ui/tree/grid/grid-datamodel


  • Live demo: http://view.jqueryui.com/grid/grid-datamodel/data.html
  • TODO
    • should we use getters/setters or the datalink plugin?
    • does it make sense to use the widget factory for non-DOM widgets?
    • how should the datastore and datasource be related?
      • SproutCore model: user always talks to store, store delegates to datasource
      • MS model: user asks the datasource for a view/store and then interacts with the view
    • how should we refer to item types?
      • name (string)
      • dataitem constructor
      • datasource instance
    • how should sorted/filtered data be stored?
    • is there actually enough overhead in instantiating dataitem instances to use lazy initialization?
    • what should the API for CRUD actions look like?
    • should we use a generic observable array as the basis for dataitems? 


Review of existing implementations:




Comments (2)

Steve Rayner said

at 5:56 pm on Feb 25, 2011

typo on the setter;

$.widget( "ui.dataitem", {
defaultElement: null,
options: {
data: null
_create: function() {
get: function( key ) {
return this.options.data[ key ];
set: function( key, vaule ) { <----------- typo here
this.options.data[ key ] = value;
return this;

sorry havn't got to grips with git hub yet, so i don't know the proper etiquette for how to contribute.

Richard D. Worth said

at 6:42 pm on Feb 25, 2011


Fixed thanks. In the future, for something like this, even if you're not quite set up with GitHub, see http://blog.jqueryui.com/2010/05/how-to-submit-a-fix-to-jquery-ui-the-easy-way/

You don't have permission to comment on this page.