Unleash The Grid

Posted on by

The jQuery UI Team is proud to announce that we are building a rich, fast grid widget that will enhance an HTML table with data linking, sorting, paging, filtering, row selection, and inline editing. As part of this process, we’ll be building the features of the grid as standalone widgets and revisiting existing jQuery UI components. At the end of this process, not only will we have a grid, but also a better-tested, more feature-complete user interface library.

Current Progress

We are nearing completion of development on Stage 1 of the project, which encompasses the creation of a generic data model, data type parsing, and markup. This stage will culminate in a “zero feature grid,” an enhanced HTML table that supports the jQuery UI CSS Framework and serves as a base for other grid features. See the roadmap for details on work planned for future stages.

Development Approach

There are already a number of high quality jQuery grid plugins. We recognize they each have an impressive set of features, capabilities, and a level of use by members of the jQuery community. We are studying and applying practices and techniques from today’s most popular grid and data table plugins, including current favorites, SlickGrid, jqGrid, DataTables and a few that have not been updated in a while, like Tablesorter, Flexigrid, and Ingrid. We invite all authors and users of these and any other grid plugins to get involved in the design of the jQuery UI Grid.

Not Invented Here?

As you may imagine, we’re pretty big fans of the jQuery UI API. We believe that having a consistent interface to complex plugins is a big win for users. Sometimes in the past, we’ve adapted already-complete plugins. Unfortunately, this approach can lead to headaches related to legacy bugs, inconsistencies with the rest of our API, and lack of familiarity with the original design decisions. By building from the ground up, we can ensure that each line of code has been vetted and that any grid we call “jQuery UI’s” conforms to our standards.

More Than Just A Grid

We’re not just developing a grid, but rather designing and building modular and extensible components, like sorting, paging, filtering, and in-place editing, that can be combined into a grid. We’re confident that jQuery UI users will find compelling and creative uses for the new suite of tools that are being built to support the grid.

Refactoring Interactions

While jQuery UI’s mouse interaction plugins work well enough in many cases, we are well aware that they have lingering shortcomings – including their ability to work properly on tables. As part of the Grid development, we’ll be giving the interaction plugins a long-awaited refactoring to simplify their APIs, address edge cases, and generally ensure their suitability for a wider variety of contexts.

Join Us!

Do you want to help design and build the jQuery UI Grid? Share your feedback? Join us on the grid planning wiki page. You can stay up-to-date with development and test the latest iterations on jQuery UI’s grid branch.

Sponsors

This work is made possible by the generous donations by individuals as well as corporate sponsors. These sponsors have donated financial and development resources to ensure the grid work can go forward over the next 5-6 months.

In particular, the jQuery project would like to thank the following sponsors (as of today) of the jQuery UI Grid project:

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 Sponsor

  • 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.

If you or your company is interested in being a sponsor of the jQuery UI Grid, please get in touch.

31 thoughts on “Unleash The Grid

  1. Ask Google to donate, they’ll surely do….
    or maybe not, because they’re capable of doing respectable javascript, something other “software giants” are just incapable of.

    Seeing such a big Microsoft logo in a open source project give me the creeps… Why they don’t go and make a web browser that works, respect standards and doesn’t make us web developers work double because of IE inconsistencies

  2. The grid UI component is welcomed for sure. But what about other components that have been in development for ages – the menu and tooltip widgets? Does it make any sense to start a new widget development without completing existing open projects?

  3. Thanks @Jerod Santo and @Skywalker

    @Rudiger – Some grids call this virtual rendering or virtual scrolling. Both SlickGrid and jqGrid have such a feature. We will first start to tackle this as part of Stage 2 when we work on the Paging feature.

    @dryu – That’s actually one of the main reasons we didn’t start the grid as soon as 6-8 months ago, when the planning was done, we had to get other things in order first. We need to ensure we have sufficient resources for the grid as well as to maintain and advance the rest of jQuery UI. We now have 1.8 in a good spot; Menu and Tooltip and Spinner have already landed in master so they’ll be in the 1.9 release (a few months out, sooner than grid – see http://wiki.jqueryui.com/Roadmap ). As of July 2010 we have 20 hours per week dedicated of Scott Gonzalez’s time to ensure existing code and new code continues to be developed and maintained. This has been a tremendous boon, and should continue for another 5 months. Also he’s not alone. He has a growing team that will focus on that, not grid. Even with that, it took us until December to get to a point where we felt we could handle the grid in addition to all that, as a parallel effort.

  4. richard_alan on said:

    While building this grid please don’t forget that some users will want the grid to support the azure cloud table storage.

    Thanks,

    Richard

  5. Pingback: jQuery: » jQuery Community Updates For February 2011

  6. wallenium on said:

    think the grid will be great.

    but: [...]they’ll be in the 1.9 release (a few months out, sooner than grid)[...]
    think its sad to wait another few month for the final release of the 1.9 branch. Love the spinner widget, but as it required core changes since 1.8, i have to build it every time… is there a smart way to get a single, not minimized file of the UI?

  7. Ben Utzer on said:

    great news! I hope it will be possible to select ranges and blocks of cells just like the YUI datatable.

  8. @hello – not currently features that are in scope, but we’d certainly appreciate if you could add some detail on them to this page http://wiki.jqueryui.com/Grid-Features so we have a chance to consider them in the future

    @Yahasana – Thanks for the link. I have added it to http://wiki.jqueryui.com/Grid-CoolDemos so we can use it as a reference

    @wallenium – there are many programs that’ll do concatenation of JavaScript files, and you could point them at the files in GitHub, if you want the latest. Otherwise, use the 1.9 milestone releases. We’re getting ready to do another one, will be the first after moving menu, tooltip, and spinner into master.

    @Christophe Méresse – I think this post (under development approach) as well as http://wiki.jqueryui.com/w/page/34246941/Grid#DevelopmentApproach and http://wiki.jqueryui.com/Grid-OtherGrids show fairly well that we have done our homework; we’re aware of existing grid implementations and are looking to learn as much as we can from them.

  9. Rather interested in the group’s vision of the data model.

    Having played with jLinq ( http://www.hugoware.net/Projects/jLinq ) and seen how it’s rolled into jqGrid, I grew to like the ability of massaging the dataset in-place, instead of relying on server or external code to prune the result set and trigger the redrawing of the grid.

    I wonder how you see the relationship between dataset and grid. MVC like? Would the sorting and filtering be a presentational function of grid, where underlying data stays same, or the dataset is changed in-place, including change of the order, which is reflected in the grid, or there is a “filter and order” proxy between a dataset and the grid? How is paging being imagined? Grid calling pack the paging events through dataset that calls server-side? Caching?

    I, for example, shifted completely to MVCs like Sammy ( http://code.quirkey.com/sammy/ ) and do not quite expect to go to the server all the time to get my dataset massaged. In that respect $.ajax for data really happens once. If i massage the presentation of the data (filter or sort) I might need to come back to the “pristine, unfiltered” original at some point, hopefully without reasking the server for full data. In that respect, a chain of “dataset — data window control (filter, sort, in-memory paging) proxy — grid” would make most sense to me.

    Could you expand on any of this?

  10. One more angle or complication to the dataset question is how would “multihead” (having several views into the same data set) would be accomplished with the Grid?

    Example:
    1. Grid linked to dataset. “detailed, filtered list with edit capabilities” linked to the same dataset.
    2. Is the paging, filtering, order controlled at the level of presentation widget or dataset or some “data window proxy”?
    2. New entry added through “detailed, filtered list with editing capabilities” Will the “we have new data” propagate to and update Grid through datastore?

  11. Pingback: Giant Table is dead, long live jQuery UI ! | Thomas Genin

  12. This is superb news! Consistency is key and this gives me a warm fuzzy.

    You mention “building modular and extensible components, like sorting, paging, filtering, and in-place editing”. May we take away from that statement that there will finally be a solid jQuery implementation of such things generically?

    In particular, I am EXTREMELY interested in ditching my use of YUI just to support AJAX paging via URL bookmarking for history support. Since this is likely something that many of us consider when supporting client-side paging (with grids or without), can you speak to a possible implementation of a history module?

    http://developer.yahoo.com/yui/3/history/

    Thanks in advance,

    -Matt

  13. John Farrar on said:

    One cannot help but ask two questions.

    1. ETA … progress updates on the grid.
    2. WYSYWIG Editor (heh, had to throw that in, but don’t corrupt the post and answer)

  14. Hi,
    I just want to give a heads up about virtual scrolling.
    If you decide to implement it you probably are aware of the limitations of scroll height in all browsers (IE being the worse with around 50000px). This means that if you use the jqgrid way of calculating the virtual rows in pixels you will run in this limitation. SlickGrid has solved this issue somehow but I am not familiar with the exact solution.

    Keep up the great work!

  15. Prakash Thangavelu on said:

    Much awaiting for this!

    Will the following features be implemented?

    1. Using keyboard navigation keys
    2. ‘Fixed Header’ when scrolling