jQuery UI Grid Project
jQuery UI Grid Team
- Project Manager: Richard D. Worth
- Technical Lead: Jörn Zaefferer
- Corey Frang
- Scott González
- Adam Sontag (Bocoup)
- Boris Moore (Microsoft)
- Brad Olenick (Microsoft)
- Chris Bannon (Wijmo)
- John Ayers (Wijmo)
- Kin Blas (Adobe)
- Hans Hillen (TPG)
- Kris Borchers
- Felix Nagel
Status and Tasks
Latest Update: See our Oct 2011 update http://blog.jqueryui.com/2011/10/state-of-the-jquery-ui-grid/
Status: Dedicated work on the Grid project is on hold at the moment while the jQuery UI team focuses on the rest of the Roadmap. From http://jquery.org/updates/2012/01/19/grid-status-update-19/:
"While it is unfortunate that the progress on the main grid components isn't in a release yet, further delaying the jQuery 1.9 release is also not desirable (its been nearly 2 years now since 1.8). Taking that into account, the jQuery UI team wants to focus all available resource on the 1.9 release, after which the work on the Grid can be finished."
The jQuery UI Roadmap currently has 4 major releases: 1.11, 1.12, 1.13, and 2.0 before a release that would include the Grid: 2.1.
Previously being worked on:
Development Approach
There are a number of high quality jQuery grid plugins today. We recognize they each have an impressive set of features, capabilities, and a level of use by members of the jQuery community. We aim to study and apply best practices from today's most popular grid and data table plugins, including current favorites, SlickGrid, jqGrid, DataTables and a few not updated in a while, tablesorter, Flexigrid, and Ingrid.
We invite all authors and users of these and any other grid plugins to assist us in designing best practices for creating a jQuery UI Grid.
We've undertaken a thorough analysis of the markup and css used by existing plugins. This research will form a base for our own grid markup and css specs. See the Grid-Markup page for more details. We're also researching existing data model patterns. See Grid-DataModel for details on this work.
Getting Involved
We would love your help in planning and developing the jQuery UI Grid.
How to get involved with the jQuery UI Grid project:
- Comment on a planning page
- Grid
- Stage 1 - Zero Feature Grid
- Stage 2 - Generic Plugin Dependencies
- Stage 3 - Generic Plugin Dependencies II
- Template-Comparison (study of template engines, and of possible implementations of templates to be used by Grid)
- Template (detailed grammar of jQuery Templates, intended to be used by successor to jquery-tmpl)
- Grid-Selecting
- Grid-Editing, Observable
- Grid-CustomInputs, consists of Autocomplete, Checkbox, Datepicker, Mask, Radiobutton, Selectmenu, Spinner, Timepicker and Editable
- Stage 4 - Grid Add-ons
- Write code on GitHub
- Fork the jquery-ui repository and checkout the grid branch
- Join discussion on irc
- irc #jqueryui-dev on irc.freenode.net
- Join our regular irc meetings
Roadmap
Stage 1 - Zero Feature Grid
Estimate: 250 hours
During this stage the following components are to be implemented:
- Templating
- Data Model
- Type
- Zero Feature Grid
Estimate: 50 hours
It's planned to use the jquery-tmpl plugin for any feature where html markup is generated by the grid. Customization of markup is then possible by overriding related options, eg. an option for the row template. As jquery-tmpl allows templates to reference other templates, it is possible to build a hierarchy of templates, making customization quite efficient as an override of a single template would still be quite simple (in contrast to having a single template for everything, which would make any customization require to clone the full template). While jquery-tmpl already exists, its not finished, doesn't have any tests and may lack certain features required for grid.
Status: Work on Template is still ongoing, including a Template Comparison
Estimate: 100 hours
The data model is an abstraction for querying and modifying data from an arbitrary data source. For an editable grid with a serverside data source, the data model holds the data to display and edit in the grid, while queries and updates are pushed to the server. The data model facilitates implementation of optimizations like caching and batch updates. While the primary use-case for the data model will be the grid, its planned to make it available to other widgets, too. As other widgets that could use this abstraction, like the Autocomplete widget, have much simpler querying requirements, the data model API will initially be designed simply enough to justify its usage for Autocomplete.
Various data model implementations or plugins can implement different data sources, including local data (string array), local databases (localStorage, sqlite), remote databases (key-value store or relational on server-side) or even third-party web-services (like geolocation services). Remote data formats for parsing and serialization can be abstracted, too, to enable formats such as JSON, XML, CSV.
Status: Stage 1 complete, yet data model work ongoing as part of pretty much all stages.
Estimate: 40 hours
The Type feature handles detecting, validating, parsing and serializing various data types. One purpose is to enable type-specific sorting and filtering, like currencies or dates.
Implementations for dates and numbers could delegate to the jquery-global plugin.
Status: Completed, with
Globalize in good shape. Used by localDataview to sorting and filtering. Used by custom inputs like
Spinner and
Timepicker.
Estimate: 60 hours
This tasks covers implementing the simplest grid possible, by enhancing a regular html table. Enhancements include:
- Injecting markup to allow styling the table with the CSS framework (eg. make it ThemeRoller-ready)
- Creating a titlebar based on the table's caption, if present.
- Markup and styles necessary for scrolling of the table body, while keeping the header visible.
- Trimming cell contents to prevent wrapping, and forcing equal heights for all rows.
These enhancements can be applied multiple times, so that a refresh can reflect changes to the underlying table.
Status: In good shape, needs to improve scrollbar rendering and some other CSS issues.
Stage 2 - Generic Plugin Dependencies
Estimate: 210 hours
During this stage the following components are to be implemented:
- Sorting
- Paging
- Filtering
- Menu
Estimate: 30 hours
Sorting includes a widget for single column sorting: Indicating clicks areas, handling input, outputting current sort directions. The widget must be flexible enough to allow implementing mutli-column sorting, too.
The widget must communicate with the data model to indicate which columns to sort in which direction (if sortable in the first place), and to display the current sort order.
Status: Menugrid component needs to be finished.
Estimate: 80 hours
Paging includes a widget for paging through a data set: Offering various controls to choose the page to display, while indicating the current page as well as the total number of pages.
The widget must communicate with the data model to indicate which page to show next, and to display the available pages and current page.
Status: Pager widget needs updates, scroll-based paging needs prototype.
Estimate: 60 hours
Filtering includes a widget for selecting data to display: Inputs for specifying filters based on column types (or a single input for all columns), and a display of current applied filters.
The widget must communicate with the data model to indicate which rows to output, as well as indicating the current set of filters.
Status: Menugrid component needs to be finished.
Estimate: 40 hours
Menu is a critical dependency for grid, to be used for any context menus (eg. to group various column sorting and filtering options). While work on menu is already being done for 1.9, it doesn't yet have any built-in support for nested (or drilldown) menus.
Status: Menu now supports nested menus and has addon extensions
Menubar and
Popup. Drilldown menus not yet implemented.
Stage 3 - Generic Plugin Dependencies II
Estimate: 400 hours
During this stage the following components are to be implemented:
- Selecting
- Editing
- Custom Inputs
Estimate: 100 hours
A selectable interaction that works with rows, columns and cells (or, optionally, just one of these), and interacting with the data model to publish the actual selection. Supports the same keyboard interaction as selectable (the planned/new one). Could use checkboxes or radios to indicate selecting rows.
Status: work in progress - grid prototype based on existing Selectable exists; functional spec including both keyboard and mouse interaction.
Estimate: 120 hours
A widget for editing cells. The editing ability can be specified for each column, the editor to use depends on the column type (see 3.1.3 Type). Editing can be cancelled (ie. throwing away all changes), or persisted (ie. synchronizing changes with the data model). Activating inline editing can happen for a single cell or a full row (or even full grid). Activating editing must interact with selection to avoid conflicts, e.g. a selection musn't start editing.
Status: work in progress - multiple prototypes written, various TODOs and issues still open
Estimate: 180 hours
A set of widgets to provide custom editors for inline editing, based on the types explored in 1.3
Type. While some widgets already exist in jQuery UI (e.g. autocomplete), most required widgets are missing or need to be heavily improved. Datepicker needs a full rewrite to be as flexible as needed for the grid. This likely affects most widgets, except accordion and tabs.
Stage 4 - Grid Add-ons
Estimate: 150hrs
During this stage the following components are to be implemented:
- Hide/Show Columns
- Column Reordering
- Column Resizing
- Column Totals
- Row Grouping
- Formulas
Estimate: 20 hours
A widget to control which columns to show and hide. Needs to display a UI that doesn't depend on column headers, as those aren't available for hidden columns. Needs to communicate with data model about visibility changes.
Status: in planning
Estimate: 30 hours
A widget for drag and drop based reordering of columns, by dragging the column headers. During drag only a preview is actually dragged, instead of dragging the full column (unless actually feasible). The widget will communicate with the data model for any updates.
Status: in planning
Estimate: 40 hours
A widget for resizing of columns, by dragging the edge of columns. If real-time updates during drag aren't feasible, only a visual indicator denotes the resulting column size, while the actual resize happens on drag stop.
Status: in planning
Estimate: 15 hours
A widget to display summaries or totals for columns. The data comes from the data model, which could compute totals on the client-side, or ask the server for details.
Status: in planning
Estimate: 30 hours
A widget to group multiple rows under a shared header, with its own label. The header can be used to collapse a group. The widget can be combined with the Column Totals widget to show totals for each group.
Status: in planning
Estimate: 15 hours
A data model extensions to specify columns that compute their values based on other cells, eg. for row totals. Needs a hook to specify additional columns and their ordering, along with a hook to calculate cell values. Makes sense when the data coming from the server is fixed and can't be extended to include these columns in the first place. Needs to interact with the sorting widget and data model to handle sorting of these computed columns.
Status: in planning
History
The jQuery UI Grid Project was conceived of in late 2009. At that time, we recognized that though we always wanted to create a grid component as part of jQuery UI, the scope and complexity of the effort had prevented it from ever getting started with the limited resources of the project and team. We started thinking and talking (with ourselves and others) about what we could do if we had some resources dedicated to the grid.
In early 2010 the jQuery UI Team met for a few days to plan out the grid project and put together a roadmap including milestones and estimates for each stage. After some additional planning and discussion in the following months we had a project proposal to present to sponsors with a target to start development in December 2010.
Sponsors
The jQuery project would like to recognize and thank the generous support of the following sponsors that make this work possible:
Double Platinum Grid Sponsors
- Microsoft - The Microsoft Web Platform and Tools team builds many technologies for developing web sites including ASP.NET, ASP.NET MVC, IIS, Visual Web Developer and Web Matrix.
- Adobe - Adobe Systems Incorporated offers business, creative, and mobile software solutions that revolutionize how the world engages with ideas and information.
Platinum Grid Sponsors
- Wijmo - Wijmo is a complete kit of over 30 jQuery UI Widgets. It is a mixture of jQuery, CSS3, SVG, and HTML5 that, when combined, become an unstoppable force on the web.
Would you or your company like to help sponsor the jQuery UI Grid project? Email richard@jquery.com . Thank you for your support.
sponsor credits: All trademarks are the property of their respective owners.
Comments (0)
You don't have permission to comment on this page.