Weekly Call 2011-Apr-20 Wed 1:00pm ET (30min)
Location: Skype
Attendees: Richard D. Worth, Jörn Zaefferer, Adam Sontag, Dan Heberden, Boris Moore, Kin Blas, Chris Bannon, John Ayers, Jonny Bradley
Minutes:
- Grid-SPF update to new spec still needs to be completed
- Everyone should review Stage 3 items before next week's meeting and decide the areas of focus in which they're interested
Weekly Call 2011-Apr-06 Wed 1:00pm ET (45min)
Location: Skype
Attendees: Richard D. Worth, Jörn Zaefferer, Scott González, Adam Sontag, Dan Heberden, Boris Moore, Brad Olenick, Victor Mitnick, Chris Bannon, John Ayers
Minutes:
- Reviewed draft datasource API spec on http://wiki.jqueryui.com/Grid-SPF adding a couple open issues
- Deferred discussion of more work Brad readied as it relates to editing which is part of Stage 3
- Set goal to have draft datasource API implemented in prototypes over next 1-2 weeks to close out Stage 2
- No call next Wed.
- jQuery Conference between now and next call, Richard to present on progress so far with Stages 1 and 2
- Next call scheduled for Wed. April 20 to kick off Stage 3
Weekly Call 2011-Mar-29 Tue 1:00pm ET (30min)
Location: Skype
Attendees: Richard D. Worth, Scott González, Adam Sontag, Dan Heberden, Boris Moore, Brad Olenick, Chris Bannon, John Ayers, Amjad Masad
Minutes:
Weekly Call 2011-Mar-16 Wed 1:00pm ET (40min)
Location: Skype
Attendees: Richard D. Worth, Adam Sontag, Dan Heberden, John Resig, Boris Moore, Brad Olenick, Kin Blas, Mark Cavins
Minutes:
Weekly Call 2011-Mar-09 Wed 1:00pm ET (30min)
Location: Skype
Attendees: Richard D. Worth, Jörn Zaefferer, Scott González, Adam Sontag, John Resig, Boris Moore, Brad Olenick, Kin Blas, John Ayers, Alex Frenkel
Minutes:
- Reviewed Brad's and Jörn's data model work
Weekly Call 2011-Mar-02 Wed 1:00pm ET (1hr)
Location: Skype
Attendees: Richard D. Worth, Jörn Zaefferer, Scott González, Adam Sontag, Dan Heberden, John Resig, Boris Moore, Brad Olenick, Kin Blas, Chris Bannon, John Ayers
Minutes:
- Jörn shared progress and open issues on Menu
- Richard shared Sorting Paging and Filtering use cases wiki page http://wiki.jqueryui.com/Grid-UseCases inviting people to contribute details and use them as tests for these features in data model prototypes going forward during Stage 2
- Brad walked through https://github.com/brado23/jquery-ui/tree/borisGrid/grid-datamodel2
- Boris committed to March 16 early preview of beta2s for DataLink (yes), tmpl (maybe), data model (maybe)
- March 16 early preview will be in GitHub, code should start landing in GitHub about a week before that
Weekly Call 2011-Feb-16 Wed 1:00pm ET (30min)
Location: Skype
Attendees: Richard D. Worth, Jörn Zaefferer, Scott González, Adam Sontag, Dan Heberden, Boris Moore, Kin Blas, John Ayers, Amjad Masad, Jonny Bradley, Robert Plummer
Minutes:
- Stage 1 completed on Feb 7
- Stage 2 kicked off this week, focus on 4 main components: Sorting, Paging, Filtering and Menu
- Menu is mostly getting the existing jQuery UI Menu widget in master finished and making sure it has all that grid needs from it
- Joern has started touching up Menu wiki page and will continue focusing on it
- Richard will create wiki pages for Sorting, Paging, and Filtering
- Stage 2 (like Stage 3) will focus on generic plugin dependencies, building reusable components that any data-bound or data-aware control can re-use, not only grid
- Focus will actually be kept mostly off grid during this stage to ensure grid-specific needs don't too heavily influence the core functionality of these plugins
- The plugins will each be developed either in two parts or with the parts to them:
- back-end: something they add to or depend on data model for
- front-end: ui widgets, templates, patterns, etc
- Boris confirmed he is working on an alternative data model in the "closer to 2 weeks than to 2 months" time frame
- Grid team would like to be able to review this before end of Stage 2
- In the meantime, grid team will continue working with existing data model prototype in parallel to work out what needs each of sorting, paging, and filtering have of the data model and how they might interface
- Planned to come up with 5-10 non-grid use cases that each use one or more of sorting, paging, and filtering
- These will be used to test and verify the components and their integration with the data model through this and future stages
- These will also serve as a showcase for the modularity and reusability of each of these components
- Reminder that next week is Grid sprint Feb 21-26
- Richard, Joern, and Scott will be sprinting together in person in Vienna, Austria
- Everyone else is invited to join virtually
- Because of the sprint, no weekly call next Wed. February 23. The next weekly call will be Wed. March 2
- Target date for completion of Stage 2 will be announced at the next weekly call
Weekly Call 2011-Feb-09 Wed 1:00pm ET (2hr)
Location: Skype
Topic: Data Model, Templating
Attendees: Jörn Zaefferer, Scott González, Adam Sontag, Dan Heberden, Boris Moore, Brad Olenick, Kin Blas, Chris Bannon, John Ayers, Amjad Masad, Marcus Ekwall
Agenda
Minutes
- Data Model Component
- Consideration of building the grid only on an observable array, which is just a plain array, but with some communication set up around it, e.g. via datalink
- Have a basic "view" widget that accepts such an observable array, e.g. a detail view
- Have grid be such a view widget that renders tables
- Have data sources and stores be infrastructure that provides the raw array to grid or other views
- Boris will continue working on datalinking(2) and improve his data model prototype accordingly (details below)
- With raw arrays, how does paging, sorting and filtering fit into the picture? Something Boris will also explore in his prototype
- The question of using non-DOM widgets will be less important if we model everything around observable arrays
- Templating Component
- How can we package templates with widgets? How should template customization look like? Must be possible to decide that in the context of an application. Plenty of options: Inline script tags, load via ajax, bundle compiled templates with other JS code, use scriptloader.
- In general, future widgets using templates will have a default, built-in template (could be part of the widget's js file), with the option to replace that.
- Do we want to use nested templates? Okay to expose template composition, but not worth it for saving just three lines of code. In general, an {{each}} is a good opportunity to replace with a template call.
- TODO research options for bundling default templates so that its easy to make a copy of that and customize it
- TODO use .html files (or other extension as there aren't necessarily well formed) in source, and provide compiled templates as part of our build (e.g. download builder) while someone minifying on their own can use the original templates
- TODO try out composition on the datepicker example to see if that works
- Types Component
- Can we move features from date.js wrapper to jquery-global?
- TODO review which features make sense, discuss with Dave Reed, in general no concerns over adding things to jquery-global
- General discussion on role of unit testing for grid and plugin developments (in regards to concerns over jquery-tmpl/global/datalink lacking unit tests).
For Boris' work on his prototype, the proposal was to follow this sequence:
- Add support for collection change events in my current version of datalink (datalink2.js)
- Add a DataView implementation that does local sorting and paging etc.
- Hook DataView up to a DataStore or DataContext
- Prototype example of end-to-end where the DataStore talks to the server
Additional notes from Marcus Ekwall: https://docs.google.com/document/d/1ASdvd7jAdEQTFvIxJi-8PqyQcdTDcZz94XZ3sMuRTaE/edit?hl=en&authkey=CIi7sLwD#
Weekly Call 2011-Feb-02 Wed 1:00pm ET (1hr)
Location: Skype
Attendees: Richard D. Worth, Jörn Zaefferer, Scott González, Adam Sontag, John Resig, Boris Moore, John Ayers, Chris Bannon, Kin Blas, Amjad Masad
Minutes:
- 6 calendar days remaining in Stage 1
- As of 31-Jan at 213.75 hours so far of 250 estimated for Stage 1
- Templating Component
- Not much happening at the moment. Some items for discussion on the Grid-Templating page.
- Using jquery-tmpl b1 for Stage 1
- Type Component
- jquery-global is meeting most needs at the moment. Jörn has created some great demo/test pages. Links on the Grid-Types page.
- Using jquery-global b1 for Stage 1
- Data Model Component
- Jörn and Scott G have analyzed a number of existing models and have a prototype for discussion and review
- Some discussion of open items at top of Grid-DataModel page. Tabled further discussion for next call which will be 2hrs and focus on DataModel
- Boris to create a public repo for his data model prototype in https://github.com/BorisMoore that can then be linked to from Grid-DataModel page
- Zero Feature Grid (markup) Component
- Richard to complete markup analysis on Grid-Markup page
- Richard has started markup prototype for discussion and review in GitHub. Link on Grid-Markup page.
- TODO: test number of stylesheet limit
- TODO: test rules plugin for performant sizing of columns using dynamic css rules
Weekly Call 2011-Jan-26
(cancelled)
Weekly Call 2011-Jan-19 Wed 11:30am ET (30min)
Location: Skype
Attendees: Richard D. Worth, Jörn Zaefferer, Scott González, John Resig
Minutes:
- Set Stage 1 target completion date to Feb 7
- As of 18-Jan at 109 hours so far of 250 estimated for Stage 1
- Templating Component
- beta2 of tmpl and datalink may not be completed by the end of Stage 1. For the time being, data model will build on existing beta1 APIs, recognizing there may be some API changes in beta2, but at least for now there are no known missing features in tmpl needed for grid
- Type Component
- Jörn finished various updates to jquery-global, added currency parsing support
- Still to be implemented: detection
- Data Model Component
- Jörn and Scott G are researching existing data models and prototyping on GitHub
- Zero Feature Grid Component
- Richard posted a list of details for existing grid plugins
- Richard is working on compiling his findings in researching markup and css from SlickGrid, jqGrid, and DataTables
- Estimated availability for next 1-2 weeks:
- Jörn: 10-20 hours
- Scott G: 5-15 hours
- Richard: 25-40 hours
Initial Planning 2010-Mar
Location: Boston (Bocoup Loft and Filament Group)
Attendees: Richard Worth, Jörn, Scott González, John Resig, Stephen Walther, Eilon Lipton, Todd Parker, Scott Jehl
Minutes:
Grid usecases
- Enhance a table with local sorting (ala wiki.jqueryui.com Overview table) - applicable for Progressive Enhancement * (+10 hours)
- Build a CRUD interface to a single table (page, sort, filter, create) aka Spreadsheet * (+20 hours)
- Reporting views (page, sort and filter rows, reorder and filter columns)
- Email client (select rows for archiving, click to open thread - GridTree!) - applicable for Progressive Enhancement * (+30 hours)
- Netflix queue (maybe)
- Checkbox selection
- Dynamic columns - Teacher/Student grades * (+10 hours)
- Calculate values based upon selected columns
- User list - multi-select - show multiple user information (master/details with multiple) * (+25 hours)
- A chart that renders from a data store - with cell editing * (+30 hours)
(example http://dwpe.googlecode.com/svn/trunk/charting/vanilla.html)
- Box selector range of cells (highlight on a chart)
- grid with empty row at bottom for new item creation by entering data into any (already editable) cell. New empty row is created as soon as editing starts in cell. Allows for super-fast item creation with down-arrow and typing in one column
Other usecases
- Live search * (+15 hours)
- Data-bound list
- Autocomplete * (+15 hours)
- Paging (for search results)
- Spreadsheet with arbitrary cells and spreadsheet formulas
- Combobox
- Tree
- Chained Selects
- Image grid, Floated images grid with infite scroll and width resizing
- Coverflow (images)
- Carousel (images)
- iTunes
- Hotel / Travel UI (like kayak.com)
Goals for the Grid
- Modular/Extensible
- Scalable (# of rows - 1,000,000, # of columns - 256)
- Build off of existing markup
- Themable (ThemeRoller ready)
- jQuery UI Widget
- Reuses jQuery UI interactions and jQuery UI widgets
- Accessible (keyboard, ARIA, focus management)
markup/css statics: http://jquery-ui.googlecode.com/svn/branches/labs/grid/tests/static/grid/default.html
<div id="test" data-ui-dataType="currency"></div>
$("#test").sortable();
$("#test").sortable({ dataType: "currency" });
<input type="submit" data-ui-icons.primary="ui-wrench" />
Same as? $(":submit").button({ icons: { primary: "ui-wrench" } });
<table>
<thead>
<tr>
<th data-ui-sort="desc" data-ui-dataType="currency" data-ui-hidden="false">Name</th>
</tr>
[
{ title: "Name", sort: "desc", dataType: "currency", hidden: false, sortable: true, sorted: "desc", sortedIndex: 1 }
]
columns: [
{
id: String
label: String,
dataType: String,
sortable: Boolean
sorted "(asc|desc)",
sortedIndex: Integer,
visible: Boolean
}
]
- Data Model (100 hours)
- Dataset, Column, Item, Field
- Data Model is an object that's instantiated and holds the datastore and element list
- Ability to specify the name of the ID on the table - data-ui-id="MyID"
- Ability to specify the ID on a row data-ui-id="1234"
- Provide _default type
- We need to support multiple elements representing a single "row"
- Initialization
- Init the data
- An array of data
- A string pointing to a URL
- A function with a callback - callback gets passed an array
- DOMElement or jQuery Set - run the extractor functionality
- Need a data model ready event
- Data Extractor
- .datastoreAttributes .columnAttributes (both arrays)
- Snap in new extractors: jQuery.dataStore.extractor.table = function( elem, dataStoreObject ) { // Init columns // Init metadata // Extract row data };
Builtin: _default
- Extractors populate .columns, .data?, and misc metadata properties
- Tables
- Extract table metadata
- Extract header names (IF thead, get columns, IF NO thead, get ths from first, IF NO ths use indices).
- Extract row data - completely up to the extractor
- Lists (or anything else)
- Extract element metadata
- No headers to extract
- Load Table From XML
- Remember that data loaded from server could have null fields
- Figure out a syntax for XML and JSON loaded from the server
dom element --> $(domElement).data("data-row-id") // uuid?
null == do it all
id == do it to single row
array<id> == do it to each id
dom element -> id
array<dom elements> -> array<id>
jquery set -> array<dom elements> -> array<id>
number = row at offset #
number, number = row range from offset to offset
array<number> = selection of items at row numbers
jQuery("#someRow").dataStore("hide");
if ( domElement.data("data-row-id") ) { // Must be of type string not number!
$(this).closest(":datastore").dataStore("hide", domElement.data("data-row-id"));
}
hide
remove
delete (?) sort (?) - should be implemented by other plugins
show
refresh
- Elem store should be populated when data is loaded/refreshed.
Need a way to hook in to the render to post-process
// Example of how .dataStore will store the actual data on an element
$("#display").data({
"elemStore", [ .... ],
"dataStore": refToDataStore,
"viewTemplate": "...."
})
// Attaching a Data Store to a couple data store views
$("ul, #display").dataStore( myDataStore );
// Watching for when a few users are selected in one data store view
$("ul").bind("selected", function(e){
// And updating another data store view with the results
$("#display").dataStore("show", $("ul li:selected"));
});
// When nothing is selected, hide the details data store view
$("ul").bind("unselected", function(e){
$("#display").dataStore("hide");
});
- A way to invalidate the entire data store
.dataStore("remove")
- A way to load chunks of the data store (either from local or from remote) needs URL mapping
Row number is the position in the data set / position in the set on the server
Row ID is a unique identifier (used for editing, saving, etc.)
.addClass("indicator")
// Internally, updates individual rows (merges the two objects for each row)
// Then calls refresh on all the rows (e.g. "refresh", 0, 9)
.dataStore("update", 0, 9, object, {
success / error / timeout
.removeClass("indicator")
//call refresh on other data store view
}) // needs to support array<object>
// or .dataStore("refresh") on other data store view
// Publish some events: updating, updated, update-error
- A way to update existing records
- Communicate changes to a server
- A way to update the rendered view of a record
$("#somerow").dataStore("refresh")
$("table").dataStore("refresh") // refresh elemstore
- URL Mapping
- Use a template (?)
function urlMapper( options ) {
// options.offset
// options.pagesize
// options.columns = [
// { id: "name", label: "Name", sorted: "asc", sortedIndex: 2, filter: "John" },
// ...
// ];
return "http://example.com/?offset={{offset}}&pagesize={{pagesize}}&sort={{column?}}&dir={{dir}}";
}
- Type (i18n/l10n) (30-40 hours)
- Any plugin that uses these should have a 'refresh' to reload the UI controls with the right values.
- View (Number -> String, e.g. 5000 - "5,000")
- Read ("5,000" -> 5000)
- Detect ("5,000" -> "Number")
- Edit (Produce Markup?)
- Trigger an event when the change is complete
- Filter (if it's a date - datepicker)
- Validation
- Types
- Currency
- Number
- Date
- Time
- Combobox (autocomplete - pass in values or pre-population from existing values)
- http://wiki.jqueryui.com/i18n
- http://forum.jquery.com/topic/locale-information-should-be-separated-from-plugins
jQuery.types.aftertoday = {
type: "date",
options: { }
};
- Zero Feature (50-60 hours)
- Creating/populating the titlebar from caption
- Loading data from the table
- Set column width (defaults to auto, have an 'equal' option, and specify width)
- Div around both tables, can support horizontal scrolling
- Set table height (data-ui-height?) can be a pixel or 'auto' (auto expands to full contents)
- If this is not specified, then we should expand height/width (needs investigation)
- Trimming table cell contents to keep them from wrapping
- A way to highlight a column explicitly
- A way to refresh the table or an individual row
- Alignment of columns
- Ability to Show Row # in a column (dynamic column)
- Theming
- Hover Row / Hover Column / Hover Cell
- Striping
- If height is specified, and row body height could have scrollbar
- Selection (80-100 hours)
- UI styling needs more detail (focus / active / selected)
- Merge with existing Selectable functionality into new Selection plugin
- Event for when selection occurs and a data method for accessing all selected items
- Mouse Options:
- Drag and select multiple
- At most one can be selected
- Making a new selection clears any previous selection
- Clicking to select an already selected does not toggle
- Should checkboxes/radios be injected/used for the user to interact with
- Modifier keys
- Shift: Expands continuous selection range
- Meta (Mac-Cmd/Win-Ctrl): Toggles single item without affected other selection(s) where the click without the modifier would
- Keyboard navigation
- Up/Down or Left/Right
- Sorting (20-30 hours)
- Top-level data-ui-sortable="true" on table
- Specify the column types (way to specify types)
- Specified as an array of values
- PE: data-ui-format="currency" vs. data-ui-l10n-format="currency"
- Specify the starting sort direction (desc, asc)
- data-ui-sortdir="desc"
- Enable/Disable Sorting on a particular column
- data-ui-sortable="false"
- Depends upon Type(i18n/l10n) plugin
- Paging (60-80 hours)
- For Ajax-loading
- # of items per page (specified and/or user customizable)
- data-ui-pagesize
- 1 2 3 ... 1234 (links) OR [ 1 ] of 1234 OR select [ 1, 2, 3 ] OR button to load more
- Need to know the total # of records
- data-ui-totalrecords
- Implement with templates
- First / Last Links
- Next / Prev Links
- Need URL mappers - given a page # and a # of records - give us a URL (!)
- Scrolling
- Hit (near-)bottom, load more (alternative to button - just auto-load)
- Show full scrollbar (as if everything was loaded) and dynamically load more
- Clean up old results
- Completely removes need for links or button
- How does expandable rows affect this?
- Publish 'pagination' event (can be return false to stop the user)
- How do you rebuild the UI later on if changes were made?
- Keyboard Navigation
- Page Up / Page Down
- Editing (120 hours)
- Can make column editable="false"
.dataStore("edit"[, ID[, column]]) // How do we specify true or "date"?
.dataStore("cancelEdit"[, ID]) // remove dom nodes from editing, call refresh
// All of these are stored on the data store view
editing = {
"ID1": true,
"ID2": "date"
}
editing = true;
editing = "date";
// Wipe out state on refresh
editing: {}
Check editing state on pagination
.dataStore("update", ID, dataObj?)
Need to specify how frequently to update
- Row-level blur event (focusenter, focusleave)
- Enter says done with row editing, moves to next row - go to first column
- Tab says done with cell editing, moves to next cell
- Click on cell - turns on editing for whole row (or just cell, if only that cell is on)
- Make sure not to conflate selection with triggering editing - use checkboxes for selection when doing editing as well
- Inline Edit Row
- Generate
- Click to Edit Cell
- Entire Table Editing
- Column Editing
- Add New Item POST
- Dialog for adding in an item?
- Will return data item in format we're using (must contain ID)
- Update the items with the new IDs
- Delete Row POST
- Works like update (success / error / timeout)
- On success, remove and refresh
- Reorder Row // Useful, will not work on at first
- Communicate an insertBefore event?
- Event for when column is changed, event for when entire row is done being edited
- Ways of triggering those events (columnchange and rowdone?)
- Do we have a submit button - if not handle enter key
- Inputs, selects can be used in the page to trigger PE editing
- Depends upon l10n plugin
- Theming
- Active Row / Active Cell / Editing Row/Cell / Error Row/Cell
Default: <tr>{{each columns}}<td>{{field this}}</td>{{/each}}</tr>
Custom:
<fieldset>
<legend>${firstname} ${lastname}</legend>
<label>First name: </label>{{field "firstname"}} {{editing "firstname"}}Uppercase!{{/editing}}
<label>Last name: </label>{{field "lastname"}}
</fieldset>
// Note: Names must be exact matches from header names
$("#row5").dataModel("refresh");
name -> StringFilter -> "John"
city -> StringFilter -> "Boston"
date -> StringFilterEdit -> <input type="text" ....>
Need template methods:
- field
- editing
- editable
- Filtering/Searching (40-60 hours)
- data-ui-filter="string|boolean|number|..."
- Would be good to have a way to have an external set of controls which you can use to filter
- Have an extra row with the filter controls
- Need main function to filter, will AND multiple filters whether on single column or multiple columns by default (can be overidden)
- Per column template and filter function definition
- Filter Types:
- text (exact- or like-match), with optional Autocomplete support, based on column content
- boolean (true/false, checkbox or radio button)
- numbers (exact match, greater-then, less-then, range)
- if min or max, or both, are known, offer a slider
- date (exact match, greater-then, less-then, range)
- select (checkboxes for distinct column values - none checked, show everything, otherwise display all checked matches)
- mulit-select, populated with values from the column
[ Select =, <, >, <=>? ]
- Hide/Show Columns for Grid (20 hours)
- data-ui-visibility="hidden" on the column header (Implements aria hidden)
- Gear/button above scrollbar for menu to hide/show columns
- Column Reordering for Grid (20-30 hours)
- Drag and Drop
- Separate data structure for header order
- Column Resizing (30-40 hours)
- Some vertical indicator denoting the edge being dragged
- Only change width on the end of the drag
- Try to use colgroup styling.
#mygrid td.ui-column-name { width: 160px; background-color: #F5F5F5; text-align: right; }
<tr><td class="ui-column-name">My Name</td>
- Column Totals (15 hours)
- Ask server for details?
- Show on selection
- Formulas (15 hours)
- Compute row on update
- Can only be done on static tables when sorting
- Row Grouping (30 hours)
- Need template for the grouping plugin
- A way to specify the label to associate with the value
- Hook to a specific column data-ui-grouping="true"
- Requires the existance of multi-column sorting (sort on group, column)
- Collapsing? Number totals?
- Grid Tree (60-80 hours)
- data-ui-parentid="pid"
- Based upon the filter plugin, select based upon parentid
- Styling a particular column (should probably be specified)
- Requires the existance of multi-column sorting (sort on pid, column)
- Should not use paging with this
- Dynamically insert elements into the right part of the tree when dynamically loaded
ARIA Spec for tree grid http://www.w3.org/TR/wai-aria/roles#treegrid
from Mozilla site: https://wiki.mozilla.org/Accessibility/TreeGrid
http://mleibman.github.com/SlickGrid/examples/example3-editing.html
Why not use another grid?
- Is not modularized or extensible
- Is not written in the UI style
Comparison with other grids
Comments (0)
You don't have permission to comment on this page.