JQuery GridView control

Question

Does anything like this exist?

What I am looking for is a control that is going to be client-side, with the Edit, Cancel row capabilities of a GridView.

I wish to use it to collect the data from the user and then save on the server after the user is done entering data.

EDITED:

Thanks for all the recommendations. One thing that I would like to ask all of you before I delve and spend time on learning these frameworks.

All of you seem to use ASP.net MVC and mention that these toolkits are good with this. I am however, using ASP.net web forms. Do these frameworks play well with old flavour of ASP.net?

Answer 1

How about the jQuery grid view plugin

Answer 2

Yes. jqGrid works well. Try the demos. We use it with ASP.NET MVC.

Update: In your updated question, you asked about using frameworks such as jQuery with WebForms. Can you do this? Sure. Would you want to? That's a more difficult question. In WebForms, you generally let WebForms generate JavaScript for you. That's why you have UpdatePanel and the like. On one hand, this is easy, because you can focus your coding attention on C#, and you can use grid components which don't require you to write any JavaScript at all to make them work. On the other hand, you're limited to what the generated code can do. Yes, you can write JavaScript manually, even in WebForms, but you have to work around some of the things the framework does, like changing IDs on controls. Yes, you can write event handlers in C#, but this requires the use of postbacks, which do not fit naturally in HTTP, with consequences that are visible to the end-user.

It is common to use jQuery with ASP.NET MVC in no small part because it ships with the framework. But even before that happened, it was still very common to use the two together because jQuery makes it very easy to do things which are otherwise not directly supported within ASP.NET MVC, like making controls on a page interact with each other. Yes, this means you have to write JavaScript, but as long as you're OK with that, you get the huge advantage that you can write any kind of interaction you want to without having to postback to the server.

If you are just looking for a good grid control for WebForms, then I would suggest using a control designed for WebForms, rather than a grid designed for jQuery. The reason is that the code you will write will fit more naturally within the idioms of WebForms.

If you just want to learn jQuery, well, that's a really good idea, because the framework is interesting, useful, and well-designed, but I'm not sure that a great control is the best place to start. A better place to start might be adding visual flair to some of your existing pages. It is easier to start with known HTML and manipulate it with jQuery than it is to be generating new HTML and learning jQuery at the same time.

Answer 3

From your comment (on Craig's mention of jqGrid), you're either going to want to go with jqGrid, FlexiGrid or another client-side alternative, and wire it up server-side yourself, or you will be better off with a non-jquery based commercial ajax grid component.

If you are using MVC (as Craig Mentions), jqGrid is a pretty nice fit. It's fairly easy to wire the jqGrid events to JsonResult controller actions in MVC.

Answer 4

Client-side frameworks

In addition to jqGrid, there are several other javascript framework Grids that I've been playing with recently:

1. Flexigrid: jQuery-based, no editing features yet, but planned.

2. Ext's GridPanel: Ext js is another javascript framework which interfaces with jQuery.

3. YUI's DataTable: The Yahoo User Interface (YUI) is yet another framework with an editable Grid control.

These are all client-side components: they operate in the user's browser, disconnected from your server code. Like Tracker1 and several others wrote, you'll have to either write Ajax methods yourself to wire the client-side grid to the server or you can try to take advantage of existing wrappers, such as:

Server-side options

1. Coolite's Ext wrappers for .NET

2. One of the in-progress YUI .NET wrapper libraries (YuiDotNet or Yui.NET). I don't think either of these implements a wrapper for the DataTable yet, but they may show you the way to do so.

Connecting the client and the server

If you haven't worked with a lot of Ajax or done much with these javascript frameworks, be prepared for a bit of a learning curve: as you begin to use them, you'll need to constantly bear in mind what's happening on the server and what's happening on the client (and when!).

If you use one of the straight javascript libraries I listed above, as opposed to a .NET wrapper, you'd have to write a server-side method to handle data submission and expose it to the client using your choice of technology (MVC's JsonResult controller actions, establishing WebMethods / ScriptMethods, etc.).

Related Stack Overflow Questions

Using ExtJS in ASP.NET and Returning data from ASP.net to an ExtJS Grid - these are focused on Ext's controls, but the answers contain a lot of good general information about connecting the new generation of javascript framework controls to server applications.

Good Asp.Net excel-like Grid control - you may also be interested in the answers to this question, particularly since it sounds like you want solid editing capabilities.

Answer 5

Here is an example that was done with WebForms:

http://praveen1305.blogspot.com/2009/05/jqgrid-with-asp-net-web-forms.html

Answer 6

i have found an example using DataTable and JQgrid at http://arahuman.blogspot.com/2009/06/jqgrid-using-mvc-json-and-datatable.html

Answer 7

Hi,

You can try out my free WebGrid DataGrid which uses JQuery and is JQuery ThemeRoller-Ready

Answer 8

I currently use DataTables. This allows you to create an html table and apply filters for multiple columns, multi-column sorts, paging, etc. You have the option for client side maipulation of a html table or receiving the data from an AJAX source.

It also has an API for dynamically adding rows, displaying columns dynamically, and grouping.