Ccna final exam - java, php, javascript, ios, cshap all in one. This is a collaboratively edited question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
Sunday, May 27, 2012
jQuery Grid Recommendations
What are the most recommended jQuery grid plugins out there? I've been messing around with Flexigrid which seems to be fairly decent. Are there any other noteworthy ones out there I should be looking at?
I like the jQuery Grid (#2 above) better than Flexigrid mostly because it supports editable cells, and has very good documentation and samples on the website.
The only real implementation of grids for jQuery is http://github.com/mleibman/SlickGrid/. Everything else are nicely styled tables with additional options.
Edit: It seems that jqGrid also has loading while scrolling feature from version 3.6, which is IMHO the crucial feature for grid implementations.
Personally I like the Flexigrid. It is professional looking and I like the feature set. I have seen others, but I think they don't look all that good or their features are so-so.
I did a blog entry on how to use C# 3.5 with the Flexigrid using LINQ to Reflection.
Some other grids that you might want to check out are
jqGrid (website currently seems to be down...) ingrid
Honestly I think jqGrid is currently the best option, as of the latest version. It's pretty easy to inject a form outside of the jqGrid stuff, and the addons are well broken out, as is the localization configuration. The current version works well for pre-manipulation of an XHR request before loading it into the grid itself.
I was using it in a project back in March (2009) and there were some frustrations. All of my prior frustrations have been resolved, save for one. It doesn't automagically size itself to it's parent jquery-ui container, this is pretty easily resolved with a call to a sizing method via the windows resize events, and when the page first loads. The fact that it requires a separate "pager" tag in the markup seems a bit odd as well.
It doesn't support multi-row results (haven't seen any grids that really do), but it does support a subgrid (similar functionality) which can be useful. Most of the other grids listed are either no longer maintained and are no longer valid options. I know this question is well over a year old, which is why I am making this answer/post.
After trying jqGrid and Ingrid I have found DataTables to be my grid of choice. It is clean, easy to customize and has good documentation.
jqGrid definitely has the most features but there wasn't an easy way to customize the UI since all the html formatting is intertwined with the logic. Also there is inconsistent naming conventions and methodology when setting up the config. For example, most variable names are written in all lowercase letters but a few use camelCase (this cost me about an hour of my life).
When using Ingrid I was experiencing some odd rendering issues. You couldn't put it inside of a div that is set to position relative because some elements of the grid are rendered against the window size and some are rendered against its parent. That along with some other little quirks made it not seem ready for prime time.
I hope it's not too much self advertising, but I found the above solutions (which are really great) hard to fit into my design. So I build my own, which is, IMHO, easier to style according to your wishes - I recently released it to the masses. It's not exactly a grid (it can be one) but well a view.
I've been using jqGrid, and whilst it's reasonably easy to use, easy to setup and intuitive, it's lacking a very basic feature - support for CSS styling (columns, rows or cells), which to me is a glaring oversight, and means I'm looking for a better alternative.
I've always used dataTables, and I still find it very easy to use. I think that dataTables is perfect for "showing" data (filtering...), but it can be used in a grid-like fashion if combined with jEditable as shown in this DataTables editing example .
The best option for datatable is to also use the Key Tables plugin and have a truly "Excel-like" experience as shown in KeyTable editing example .
I worked with jqGrid. It is pretty cool and has a lot of features. It is much more powerful than Flexigrid. The drawback is that it is hard to customize the user interface (such as it depends on jQuery theme - but it is related to all jQuery UI widgets).
Data Tables is also a good option (cool and simple in use).
By the way the Telerik Extensions for ASP.NET MVC is only free for non-commercial use or for OSS projects. For commercial use you need a developer license which are priced 999$/license.
It's not a grid, but it has similar features like table sorting, filtering, cell editing, pagination, many effects and you can also fully customize the skin. It's not free either, and it costs a few $ to buy me a coffee ;)
So far Flexigirid seems to be the most aesthetically pleasing and functional option (rare to find both in one offering). The only downside I've found so far is that it doesn't offer all of its functionality for every data source it supports (most of its more advanced features like sorting, pagination, etc. seem to only work when it's pulling data via JSON+AJAX and not when it's working with a standard HTML table).
Flexigrid seems nice, however, it (as well as jGrid) seems to alter the underlying HTML so that it will no longer work with TableDnD (if you want to drag rows around). That led me to write my own simplistic plugin, which I plan on sharing with the world shortly.
I believe flexible grid and jqGrid are outstanding in term of jQuery. I recommend the latter, because it seems that the author of flexible grid stopped upgrading any longer. I am also using Sigma grid, which is not built on jQuery, but it is compatible with jQuery. Most important, it could be used freely under the LGPL license.
I have tried Flexigrid. But it seems that updates are no longer provided. I am using Sigma grid, which is not a jQuery plugin, but it's also an open source one. It can work well with jQuery.
Try the jQuery grid from iX Framework. It has a grid with grouping, filtering, sorting, column show / hide. And it includes a charting component, form with validation, windows and a lot of field types.
I am also looking for a grid to use in a jQuery project I am working on. Below I have summarized my findings so far.
ReplyDeleteThe best entries in my opinion are Flexigrid and jQuery Grid (1st & 2nd in list). The others are included for completeness.
Flexigrid: http://flexigrid.info/
jQuery Grid: http://www.trirand.com/blog/
jqGridView: http://plugins.jquery.com/project/jqGridView
Ingrid: http://reconstrukt.com/ingrid/
SlickGrid http://github.com/mleibman/SlickGrid
DataTables http://www.datatables.net/index
I like the jQuery Grid (#2 above) better than Flexigrid mostly because it supports editable cells, and has very good documentation and samples on the website.
I tried jQuery Grid and Flexigrid. They are good, but Flexigrid doesn't have enough examples, and jQuery Grid is a bit heavy.
ReplyDeleteHere are some other jQuery Grid plugins:
DataTable : http://www.datatables.net/index
Slickgrid : http://github.com/mleibman/SlickGrid/
TableSorter :http://tablesorter.com/
Personally I prefer jQueryGrid (because of its features), and Datatable (because of its simplicity).
Note: jQuery UI has plans for a grid plugin: GridTable.
The only real implementation of grids for jQuery is http://github.com/mleibman/SlickGrid/. Everything else are nicely styled tables with additional options.
ReplyDeleteEdit: It seems that jqGrid also has loading while scrolling feature from version 3.6, which is IMHO the crucial feature for grid implementations.
Personally I like the Flexigrid. It is professional looking and I like the feature set. I have seen others, but I think they don't look all that good or their features are so-so.
ReplyDeleteI did a blog entry on how to use C# 3.5 with the Flexigrid using LINQ to Reflection.
Some other grids that you might want to check out are
jqGrid (website currently seems to be down...)
ingrid
There are too much options that you can try
ReplyDeleteFlexigrid: http://flexigrid.info/
Sigma Grid: http://www.sigmawidgets.com/products/sigma_grid2/
jQuery Grid: http://www.trirand.com/blog/
jqGridView: http://plugins.jquery.com/project/jqGridView
Ingrid: http://reconstrukt.com/ingrid/
DataTable : http://www.datatables.net/index
Slickgrid : http://code.google.com/p/slickgrid/
TableSorter: http://tablesorter.com/
dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/
jqxGrid: http://www.jqwidgets.com/
Checkout KendoUI. It offers a powerful grid.
ReplyDeleteThe jQuery UI team announced to have their own jQuery grid plug-in ;-) Have a look in Unleash The Grid. As of Feb 2012 this is still in development.
ReplyDeleteHonestly I think jqGrid is currently the best option, as of the latest version. It's pretty easy to inject a form outside of the jqGrid stuff, and the addons are well broken out, as is the localization configuration. The current version works well for pre-manipulation of an XHR request before loading it into the grid itself.
ReplyDeleteI was using it in a project back in March (2009) and there were some frustrations. All of my prior frustrations have been resolved, save for one. It doesn't automagically size itself to it's parent jquery-ui container, this is pretty easily resolved with a call to a sizing method via the windows resize events, and when the page first loads. The fact that it requires a separate "pager" tag in the markup seems a bit odd as well.
It doesn't support multi-row results (haven't seen any grids that really do), but it does support a subgrid (similar functionality) which can be useful. Most of the other grids listed are either no longer maintained and are no longer valid options. I know this question is well over a year old, which is why I am making this answer/post.
After trying jqGrid and Ingrid I have found DataTables to be my grid of choice. It is clean, easy to customize and has good documentation.
ReplyDeletejqGrid definitely has the most features but there wasn't an easy way to customize the UI since all the html formatting is intertwined with the logic. Also there is inconsistent naming conventions and methodology when setting up the config. For example, most variable names are written in all lowercase letters but a few use camelCase (this cost me about an hour of my life).
When using Ingrid I was experiencing some odd rendering issues. You couldn't put it inside of a div that is set to position relative because some elements of the grid are rendered against the window size and some are rendered against its parent. That along with some other little quirks made it not seem ready for prime time.
I hope it's not too much self advertising, but I found the above solutions (which are really great) hard to fit into my design. So I build my own, which is, IMHO, easier to style according to your wishes - I recently released it to the masses. It's not exactly a grid (it can be one) but well a view.
ReplyDeleteMicroView: Check it out here.
I've been using jqGrid, and whilst it's reasonably easy to use, easy to setup and intuitive, it's lacking a very basic feature - support for CSS styling (columns, rows or cells), which to me is a glaring oversight, and means I'm looking for a better alternative.
ReplyDeleteDoes Flexigrid offer this?
If you are using ASP.NET MVC Telerik has a free jQuery grid control.
ReplyDeleteI've always used dataTables, and I still find it very easy to use. I think that dataTables is perfect for "showing" data (filtering...), but it can be used in a grid-like fashion if combined with jEditable as shown in this DataTables editing example .
ReplyDeleteThe best option for datatable is to also use the Key Tables plugin and have a truly "Excel-like" experience as shown in KeyTable editing example .
I worked with jqGrid. It is pretty cool and has a lot of features. It is much more powerful than Flexigrid. The drawback is that it is hard to customize the user interface (such as it depends on jQuery theme - but it is related to all jQuery UI widgets).
ReplyDeleteData Tables is also a good option (cool and simple in use).
By the way the Telerik Extensions for ASP.NET MVC is only free for non-commercial use or for OSS projects. For commercial use you need a developer license which are priced 999$/license.
ReplyDeleteCheck out tQuery.
ReplyDeleteIt's not a grid, but it has similar features like table sorting, filtering, cell editing, pagination, many effects and you can also fully customize the skin. It's not free either, and it costs a few $ to buy me a coffee ;)
*Disclaimer: This is my script.
So far Flexigirid seems to be the most aesthetically pleasing and functional option (rare to find both in one offering). The only downside I've found so far is that it doesn't offer all of its functionality for every data source it supports (most of its more advanced features like sorting, pagination, etc. seem to only work when it's pulling data via JSON+AJAX and not when it's working with a standard HTML table).
ReplyDeleteI'm surprised nobody has mentioned Ext. Their grid is tremendous, and the API is very intuitive.
ReplyDeleteI'm waiting for jQuery UI Grid, which should be coming anytime soon.
ReplyDeletejQuery UI Grid
Yahoo User Interface datatable and datasource is a much more robust solution. I've used jqGrid and DataTable...YUI grid wins hands down.
ReplyDeleteFlexigrid seems nice, however, it (as well as jGrid) seems to alter the underlying HTML so that it will no longer work with TableDnD (if you want to drag rows around). That led me to write my own simplistic plugin, which I plan on sharing with the world shortly.
ReplyDeleteI believe flexible grid and jqGrid are outstanding in term of jQuery.
ReplyDeleteI recommend the latter, because it seems that the author of flexible grid stopped upgrading any longer.
I am also using Sigma grid, which is not built on jQuery, but it is compatible with jQuery. Most important, it could be used freely under the LGPL license.
I have tried Flexigrid. But it seems that updates are no longer provided.
ReplyDeleteI am using Sigma grid, which is not a jQuery plugin, but it's also an open source one.
It can work well with jQuery.
I'll have to second Sonor. The grid with Telerik stuff is nice, efficient and supported. If you're doing anything that is commercial I'd use that.
ReplyDeletea simple jQuery Scrollable Table Plugin
ReplyDeleteTry the jQuery grid from iX Framework. It has a grid with grouping, filtering, sorting, column show / hide. And it includes a charting component, form with validation, windows and a lot of field types.
ReplyDeleteI'd vote for flexigrid too. It's fast an lightweight.
ReplyDeleteMaybe you can also have a look at www.flexigrid-asp.net
It's an ASP.NET customized version, with documentation and lots of examples.
Perhaps Google Web Toolkit, not my favorite though
ReplyDelete