I have 3 sets of tabular data I want to display with a JavaScript framework in ASP.NET MVC. I know I can embed a separate grid in a tab, but this seems inefficient especially when large datasets are involved since I imagine 3 separate grids would be created. I haven't found a JavaScript datagrid which emulates what a spreadsheet does with multiple tabs. This example from YUI might come close though:
http://developer.yahoo.com/yui/examples/datatable/dt_dynamicfilter_source.html
I'm a little familiar with jQuery, but would be willing to switch to any framework which makes this easy. I don't really need to edit the data. Any suggestions?
EDIT: I didn't mean this to be about jQuery. Maybe some details about my scenario would help, as suggested in one of the comments. I want to display tabular data from an ordering system containing thousands of records. I'd like 3 tabs:
All orders entered in the system which haven't been paid for yet.
All orders from a specific vendor.
All orders which have been paid for.
Since each category has thousands of rows, I only want to load data if the user starts paging.
I thought having 3 tabs with 3 separate grids (one within each tab) wouldn't be performant. I haven't actually tried though, so I'm probably guilty of prematurely optimizing. I'm looking for a grid with tab support built-in. I don't think there's one for jQuery. Perhaps ExtJS?
Since you tagged this with Ext JS, I'll mention that it's quite simple to render grids into tabs using Ext JS. It also supports deferred load/render, so that only the first tab/grid would load initially, then the others would be loaded on first access. Without knowing your specific requirements it's hard to comment further.
EDIT (based on edited question): Ext grids don't directly support tabbing, but they can be embedded within a TabPanel as I mentioned for the same effect. However, based on your description, it sounds more like a filtering scenario to me. I don't see the point in having the overhead of multiple grids when only one will ever be visible, and each one's purpose is to show a specific view (i.e. filter) of the same data. I would just have a single grid with a toolbar or some other method of providing your toggle between filters, and use Ext's built-in store filtering/querying to create your views on demand. The Ext grid supports paging out of the box (client or server, in your case it would be server for thousands of records). There is also a very popular plugin called LiveGrid that provides for virtual scroll-paging of large data sets.
I'm not necessarily advocating Ext over any other framework -- I just happen to be most familiar with it and I think it could solve your problem quite nicely. I would suggest trying it out for yourself to be sure.
jQuery Grid is kinda what people use a lot. I use it and it's pretty good.
jqGrid Link
I wouldn't draw a grid with three tabs. I'd use a single grid with a tab control and then load data via jQuery as required.
Or maybe have three PartialViews that you can load dynamically when you hit a tab.
You could also use dhtmlx grid.
You could use JS tab object to create tabs.
And use javascript grid framework to create grids and populate data into grids.
Related
I Remember reading an article by Marcus Egger a while back about when to and when not to use a gridview style control. I can't find it now...
I have a member on my team who has just found some jquery grids and is determined to use them for everything...
I mean everything from lists of data (which I have no problem with) to using it as a primary means for CRUD on single items (which I find lazy and overkill).
Does anyone have an opinion on this?
Any good articles?
Am I being too picky?
I have used jqGrid control for some projects, and find it to be very powerfull and customizable. And there is a great support for all possible questions here on stackoverflow by Oleg.
However, it is impossible to give reccomendation for any scenario, as there is no silver bullet, and not even jqGrid is optimal for all scenarios.
When you need to have ajax loading and paging, (multiple column) sorting, filtering, inplace editing, enumerated column values, jQuery UI theming - jqGrid is one of the best tools. It supports all that, and different types of data formats, including json and xml.
However, sometimes you only need simple web app for administrator to perform CRUD operations on some codebooks, without requirements for specific looks, ajax and all the bells and whistles, and jqGrid is overkill in these cases, especially if autogenerated mvc scaffolding or asp.net dynamic data application does the job well. Or maybe there is no requirement for grid, if there is only a list of something needed, and it can be done in 15 minutes, then you should NOT use any grid control. There are also cases when displayed data can be more user-friendly, i.e. contact information - you will find someone a lot faster if you display large name and/or picture and smaller address, phone etc aside in a unordered list than you will do the same in a grid-styled display of same information (and you cannot put picture as it will make your row height too big).
Regarding "lazy" part of your question, I would not agree as there is often more work to make jqGrid working than use some out-of-the-box component. With jqGrid you can implement inplace editing (inside jqGrid), but you can also make completely customized form (not different from one someone expects at edit page) which is loaded into edit dialog.
Why don't you use a repeater control, then you have full control of your markup.
Or do something like that:
<table>
foreach(var i in data) {
<tr>
<td>....etc </td> </tr>
}
</table>
I am a relative JavaScript beginner. I am comfortable working with documents (document.getElementById(...) and document.getElementsByTagName(...).. and other document querying functions.
I have been asked to create some sort of a table pagination library for my team. We don't use jQuery or any other third party libraries. So I would have manipulate the table dom or something like that to make it work. In this library, I would have to be able to
set up flexible pagination (Number of rows to be displayed per page may be configured by using some sort of a text box) I took a look at some of the sources jQuery Pagination Plugin. But I can not understand it.
The user should be able to navigate back and forth using some icons. The page number changed should be reflected in the configuration box.
I am not asking for solutions because I would learn to do this on my own. How can I start working on this issue?
Update after observations from nnnn
I am not sure what approach to take, as I had not considered that possibility. Most of the times, we have only about 2000 records to display. I guess if the load does not take too much memory, I would prefer to load before hand and then try to paginate it. Although, I will go with whatever is recommended.
I would highly recommend taking a look at the jquery datatables plugin http://datatables.net/
If you want to implement your UI and just need an Object to handle pagination logic please see this library: https://github.com/pagino/pagino-js
I would like to know if there are other javascript components that provide presentation of grid with multiple groupings. Below is a screenshot of jqGrid I extended to allow the feature however it needs all the data to be fetched. I would like that data would be loaded when the grouping is expanded.
Another modified jqGrid would be nice since it is what we've been using in our project :)
Yep, Datatables does this really well.
The tutorial on how to do the show/hide details is here
I strongly recommend Datatables because after trying nearly every jQuery and YUI solution out there I've realized that it has more features, better support, and the best Ajax operation I've found. As a strong bonus, it's ThemeRoller capable, which means that I can re-skin my apps in just minutes, which has made that operation incredibly profitable.
ShieldUI's Grid can also do this - it has flexible grouping, hierarchy support and and many other fancy options.
It is a very affordable solution compared to others and also comes with a whole library of other useful UI widgets for charting, editing, layout, etc.
I know one free component that is similar to the above described grid - TreeTable. It provides presentation of grid with multiple groupings: http://docs.webix.com/samples/15_datatable/30_treetable/14_colspan.html. Moreover, it has a dynamic loading feature.
which one is best table sorter choice i wanted to do
Default filter
Sorting
Pagination
Filter
Which one is the best choice for the table filtering that do above all things?? and Most Important Not Jquery one...!!
This is what I am using : Table_Sort
May I suggest the dojo DataGrid.
The DataGrid (and all related classes/widgets) are separated from the actual data so you can put a filter on the data source in any way you would want. There is a big choice of data stores like a REST store or a simple CSV store.
Sorting can be done in the grid itself, delegated to the store or delegated to the server. Depending on what your need it is it might be wise to sort your set on the server to keep performance high in the browsers.
The page does do paging but not in the conventional way that you can flick through the pages. There might be a plug-in component on the grid to make that possible though but I don't know. The current implementation just renders the pages that are visible and when you scroll it will render additional pages.
For more info and examples:
http://docs.dojocampus.org/dojox/grid/index?action=show&redirect=dojox/grid
In my experience with dojo grid I think you will be best off using the dojox.grid.Enhanced grid. It is a bit faster then the DataGrid and new plug-ins and features are constantly added. And with a bit of reading and hanging out in #dojo it is quite possible to write your own plug-in.
I'm looking to utilize jQuery to handle a few very common requests we get for data tables of varying sizes: scrolling, sorting, and dynamic filtering.
I've handled scrolling in the past by having two separate tables with fixed width columns, along with associated div containers for the "actual" scrolling. However, this method doesn't work with any of the jQuery-based sorting table extensions that I've come across (tablesorter being my favorite so far) as they want everything in a single table.
For filtering, they're requesting something akin to how Excel and SharePoint lists do it (basically all column values are listed in a dropdown, allowing the user to select/deselect them). I haven't seen anything like that yet, although it sounds possible.
One other related nice-to-have feature would be the ability to "freeze" a column for horizontal scrolling.
Ideally I'd like an existing extenstion, but if none are out there I'd also appreciate suggestions from any jQuery gurus on how to best implement it. My current thoughts are to dive into tablesorter and extend/update it as necessary.
To hopefully keep things focused, paging is not an option (along with anything server based, for that matter).
Update:
I do appreciate the answers so far, but none of the options given so far touch on the filtering aspect at all (that said, I must admit that jqGrid looks very good for some future projects I have). In the meantime I'll work on a custom filtering solution; if it works out I'll update again.
I came across this question as I was searching for a sortable table plugin myself; I really wasn't impressed with any of the suggested widgets, but later I discovered DataTables, and I was quite impressed. I recommend checking it out.
Maybe this excellent plug-in could do it:
Demo page
It's called jQGrid, here is the project page:
http://plugins.jquery.com/project/jqGrid
I would encourage you to try out the Flexigrid.
It has a lot of great features and I personally think it looks more professional than the jqGrid.
It doesn't have some of the features that you asking for, but I think it could be a good start. It would be great if you could work on adding some of those features to the code base.
If you are coding in c#, then I posted a blog entry about how to use LINQ to Reflection to bind JSON to the Flexigrid... if you are using another language there are other examples you can find on Flexigrid's Website & Google Group page.
a simple jQuery Scrollable Table Plugin
As mentioned in my update, I ended up using a custom filtering extension (closed source, unfortunately). I've recently started using SlickGrid and it's now my go-to grid.
I'd like to add the Laravel flavored DataTables (GitHub, jquery DataTables API) - perfect if you already work with PHP/Laravel.
Extra, koalyptus/TableFilter another custom filter table (actually, my fav).