Slick Grid Extentions
Every consulting shop needs a good, reliable grid. Grids are the swiss army knife of UI design. Sure, in many scenarios you need a sharper, simpler, or more dedicated tool but a grid’s ubiquitos familiarity makes a good one indispensable for presenting and editing many types of data. This is why companies such as Microsoft spend so much effort on publishing grid controls and why libraries like jQuery offer so many grid plugins.
Surge too has invested a significant amount of time in finding the right grid for our needs. Following the Surge philosophy of reusing open source components where possible, we have settled on the incredibly versitile SlickGrid maintained by Michael Leibman. This grid is especially impressive for its preformance and editing capabilities, for providing near-infinite row support with minimal memory usage, and for an extensible mechanism for cell-editing.
Of course everything is rarely perfect. One unfortunate disadvantage of the SlickGrid is that it uses an OO-style API that is unfamiliar to people accostumed to interacting with jquery widgets in the UI; another, is that it is relatively limited in out-of-the-box editing features. Both are issues Surge has addressed with the MIT licensed Surge SlickGrid Extensions. These include a jQuery Ui widget which wraps the SlickGrid and allows simple declarative mark-up to define the grid, a standard set of useful editors that are not readily available in the regular SlickGrid, and a suite of other features.
Note that the original SlickGrid project has recently moved its trunk to version 2. As this move contains many significant changes Surge SlickGrid Extensions officially supports only version 1.4.3. An effort has been made for the widget to work with v2 and the core features have no major issues, however use at your own risk as it is less tested and will on occasion result in surprising behavior.
The following series of articles will act as a tutorial for including and using the surge SlickGrid in your web application.
- Getting and installing SlickGrid and Surge SlickGrid Extensions.
- Getting a Simple Grid Showing With the SlickGrid Widget
- Declarative Syntax for SlickGrid Columns
- Surge.SlickGrid Additional Options
- Interacting With SickGrid – Editors and Events
- Surge SlickGrid Standard Formatters and Editors
- Applying Client-Side Filters To Surge SlickGrid
- Dead Simple Bottomless Scrolling with The Surge JSONDataSource
- Autoheight With No Vertical Scrolling
- SlickGrid in jQuery Ui Dialogs