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

  • Finally, you can manage your Google Docs, uploads, and email attachments (plus Dropbox and Slack files) in one convenient place. Claim a free account, and in less than 2 minutes, Dokkio (from the makers of PBworks) can automatically organize your content for you.



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

type: utility

release: 0.0

status: in development

documentation: N/A

demo: http://view.jqueryui.com/grid/grid-spf/autocomplete.html



  • ...



1 - Description:


Work in progress covers a datasource that has an API for configuring sorting, paging and filtering, and an SPI for implementing different remote source (e.g. Flickr or Netflix API). There's also an implementation of a local datasource, which uses an array of existing data.



2 - Visual Design:






3 - Functional Specification:


A base $.ui.dataview widget, implements the API specified here. Extend to encapsulate additional features, e.g. $.ui.localDataview for working with a local array of data and $.ui.odataDataview for an implementation of a oData client.


Maps some input to an output, where the input may be a remote resource. The output can feed into other controls, but should be handled only as a view, not as the source of the data.



  • filter (Object, default: null)
    • keys reference property names, values specify what to filter with
    • $.Widget.option method supports nested getters and setters, very useful to set a single field filter directly
    • Set to null to remove all filters, set a single key to null to remove just that filter 
    • Value can be anything, as long as the dataview implementation supports it.  
    • examples: 
      • .option( "filter.price", { value: 5, operator: ">=" } ) to filter by price greater or equal than 5
      • .option( "filter.price.value", 10 ) to update the price filter to 10 (or set if not defined already)
      • .option( "filter.price", null ) to remove the price filter; if its the last filter, the filter option is also set to null
      • .option( "filter", null ) to remove all filters
      • .option( "filter", { price: {...}, name: {...} } ) to set multiple filters, removing existing ones 
      • .option( "filter.price", [  { value: 5, operator: ">="  }, { value: 10, operator: "<=" } ] ) to set a range filter  
  • sort (String or Array, default: [])
    • a single string or array of strings, with an optional minus-prefix to indicate descending order
    • examples:
      • .option( "sort", "price" ) to sort price ascending
      • .option( "sort", "-price" ) to sort price descending
      • .option( "sort", [ "EndTime", "-Price" ] ) to sort on EndTime ascending and then Price descending  
  • paging (Object, default: { limit: null, offset: 0 })
    • limit and offset
    • examples:
      • .option( "paging", { limit: 10, offset: 25 } ) to load 10 items per page and skip 25 items
      • .option( "paging.offset", 50 ) to skip 50 items  



  • page( [index] )
    • Get or set the current page, starts with 1 (not 0)
    • detail on arguments, including types and behaviour for optional arguments
    • Examples: 
      • .page() returns the current page index by calculating it from limit and offset
      • .page( 5 ) sets offset to match page five, based on the limit 
  • totalPages
    • returns the number of pages, by calculating it from totalCount and limit 
  • refresh( [successCallback, errorCallback] )
    • refresh the dataview, usually called after changing options 
    • accepts success and error callbacks, for one-off events
    • .refresh(function() {
        client.response( this.result )


  • request
    • a the start of a refresh
    • use to show a loading indicator 
  • response
    • at the end of a refresh, usually after data was received
    • use to shop a loading indicator, rerender views 



4 - Markup & Style:





5 - Latest version of plugin:





6 - Open issues being discussed


  • What should the signatures for the success and error callback look like (when passed to refresh)?
  • What event should get triggered when the request fails? Just request/response isn't enough. 




Comments (0)

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