Skip to content

Using jqGrid with ASP.NET MVC: Introduction

This is the first post in a short series on using the jqGrid jQuery plug-in with ASP.NET MVC. In this short introduction I will describe the plug-in, list some of its strengths and weaknesses, and explain why we selected it for our MVC applications. In the next few days, I will give detailed information about how to use the grid in your own applications.

jqGrid provides a nice-looking grid with built-in features such as sorting, editing, search, drill-down, tree lists, and more. It is based upon jQuery and integrates well with ASP.NET MVC. The grid is dual-licensed under both the GPL and MIT licenses (just like jQuery), so it can fit well into both commercial and open-source projects.

jqGrid with sub-grid

If you want to display tabular (grid) data with paging in an ASP.NET MVC application, there are essentially three choices:

  1. You can write your own grid components using HTML tables, links, manually-implemented paging, etc. This is actually less work than it might seem at first, and the first release of our ASP.NET MVC software did just this. But our own implementation lacked some of the visual flair of some of the third-party components, and avoided solving some of the harder problems, like in-line editing. Still, it was much easier than I expected, and worked well enough for our initial release.
  2. You can use a commercial component designed for ASP.NET. However, many commercial grid components don’t work well with MVC. Telerik has MVC demos available for their grid, and Developer Express has said that they intend to support MVC to some degree in the future. Even when the commercial components do support MVC at all, they don’t tend to make all of their features available in MVC applications, owing to the fundamental difference between the way ASP.NET MVC and "plain" ASP.NET work. If you are building a Web application on ASP.NET MVC, I would never recommend buying an ASP.NET component unless the vendor for that component is fully committed to supporting MVC. You cannot presume that any given ASP.NET component will work at all with MVC unless the vendor explicitly supports this.
  3. You can use a grid component which has no knowledge of ASP.NET at all. There are quite a number of these, generally built within the framework of one of the popular JavaScript libraries, and it is, ironically, easier to use one of them within ASP.NET MVC application than it is to use a grid component designed for ASP.NET (but not necessarily MVC).

As I said, we ended up choosing jqGrid. We were strongly influenced by the fact that we already use jQuery extensively in our application. There are several grid plug-ins available for jQuery. jqGrid has a number of advantages over the others I’ve seen, however:

  • Supports three different models for editing data within the grid: Single-cell editing, in-line row editing, and editing within a pop-up form.
  • Unlike some of the other jQuery grid plug-ins, jqGrid has decent documentation and a large number of demos with source code.
  • You can display a simple grid, a "sub grid" (drill down), or a treeview.
  • AJAX paging is supported in a number of different formats, including JSON, XML, or JavaScript objects via a custom function.
  • The grid is updated very regularly, and a new version, with support for the jQuery UI theming library is under active development right now.
  • Tracing through the grid source code is quite easy to do with Firebug, which is useful for figuring out things which aren’t quite covered by the documentation.

The grid also has a few downsides:

  • The API is a bit of a mess. Capitalization (significant, in JavaScript) is so varied that it seems almost random. Portions of the code were clearly written by different people with limited collaboration with the original author of the grid. There is no consistent naming convention, and similar functionality is sometimes invoked in wildly different ways. For example, you set the grid height with a custom method, setGridHeight, instead of the jQuery method height. But you reload the grid’s data with a jQuery method, trigger, passing the string "reloadGrid" as an argument. It’s a good thing the grid has decent documentation and includes source code, because you’re going to need them. The API is just not discoverable.
  • Although the grid has quite a number of options for editing, it doesn’t necessarily play well with some of the other tools you may want to use in the context of editing, such as jQuery validation. (For starters, the in-line row editing doesn’t actually use an HTML form.) The three different editing modes (single-cell, in-line row editing, and editing in a form) use different source modules, different configuration options, and work differently. Doing editing in a way not explicitly supported by the grid can be challenging.
  • Variable names in the source code use a lot of single letter and two letter abbreviations. This is quite common in JavaScript libraries, but it does make the source code a bit challenging to read.
  • Although there is both free and paid support available, there is not a commercial company standing behind the grid. So don’t expect round-the-clock support, a toll-free phone number, etc.

After a good deal of experimentation with several grids, we decided to use jqGrid because it has considerably more features than every other grid we examined (when used in MVC application), and because we didn’t find any of its limitations to be show stoppers.

The next post in this series is LINQ Extensions. There, I show an extension method for IQueryable<T> which returns data suitable for the grid, without having to know anything about the type T.

{ 19 } Comments

  1. Dan Miser | April 14, 2009 at 8:06 am | Permalink

    This promises to be an excellent series, Craig. Looking forward to it! I’ve been using the MvcContrib grid with the paging stuff, and it’s nice, but I’m looking for more (sorting, filtering, editing).

  2. Mohammed Nasman | April 15, 2009 at 6:20 am | Permalink

    Thank you Craig.

    I haven’t aware of jqGrid, and looking forward for your series,

  3. Praveen | April 20, 2009 at 6:44 pm | Permalink

    Hi Craig,
    How to use jqGrid within ASP .NET 2.0 application? Any solution or links you can point me to?

    Regards,
    Praveen

  4. anbo | April 21, 2009 at 8:41 am | Permalink

    Hi Craig,
    Can you show some demos of using jqGrid with asp.net MVC?
    Thanks

  5. Praveen | May 4, 2009 at 6:35 pm | Permalink

    Got something together to make it working. Have a look at the below link :
    http://praveen1305.blogspot.com/2009/05/jqgrid-with-asp-net-web-forms.html

    Very basic for now….but anyway you get the
    communication happening between JQuery,
    jqGrid and ASP .NET 2.0 Web service methods.
    Hope this helps.

    Thanks
    Praveen

  6. Sam1980s | May 21, 2009 at 11:15 pm | Permalink

    Hi,

    I checked and found out the solution this artical provides contains method signature as below.

    public ActionResult GridData(string sidx, string sord, string search, int page, int rows)

    But in the default JQGrid the method signature is only

    public ActionResult GridData(string sidx, string sord, int page, int rows)

    Can anybody please help me understanding where we need to make changes to pass the search criterias in the ActionResult as method parameters rather then the request objects.

    Regards,

    Sam

  7. gprabhakaran | June 16, 2009 at 4:58 am | Permalink

    Hi James:

    Below is my code, I need to return the result as JSON, Please let me know how to do this.

    Note: I am not using the asp.net mvc

    public string GetUsers(string sidx, string sord, int page, int rows)
    {
    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = 10;
    int totalRecords = Context.Users.Count();
    int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

    var users = Context.Users.Skip(pageIndex * pageSize).Take(pageSize);

    var jsonData = new
    {
    total = totalPages,
    page = page,
    records = totalRecords,
    rows = (
    from user in users
    select new
    {
    i = user.Pk,
    cell = new string[] { user.Pk.ToString(), user.FullName.ToString(), user.Email.ToString() }

    }).ToArray()
    };

    return jsonData.ToString();

    }

    sample output : to fit in JQGrid.
    {"page":"1","total":2,"records":"13","rows":[{"id":"13","cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]},{"id":"12","cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null
    ]},{"id":"11","cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]},{"id":"10","cell"
    :["10","2007-10-06","Client 2","100.00","20.00","120.00",null]},{"id":"9","cell":["9","2007-10-06","Client
    1","200.00","40.00","240.00",null]},{"id":"8","cell":["8","2007-10-06","Client 3","200.00","0.00","200
    .00",null]},{"id":"7","cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]},{"id":"6"
    ,"cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",null]},{"id":"5","cell":["5","2007-10-05"
    ,"Client 3","100.00","0.00","100.00","no tax"]},{"id":"4","cell":["4","2007-10-04","Client 3","150.00"
    ,"0.00","150.00","no tax"]}]}

  8. Phillip Monk | October 19, 2009 at 6:38 am | Permalink

    Hello can you help me out here i am new to asp.net and wanted to know more on formatting date columns when you posting and could you email me any more info please my brain hurts and need a simple path to follow or top blog like the one here.

  9. Cinthy | October 23, 2009 at 7:59 am | Permalink

    Hi Craig,

    Am newbie to MVC and JQuery, can you please tell me how to develop subgrid using jquery in MVC, am totally new to this, please help in developing this. I need to plement the same.

  10. Cinthy | October 23, 2009 at 8:01 am | Permalink

    Hi Craig,

    Can you show some demos of using jqGrid (subgrid) with asp.net MVC? It will help us to proceed.

    Thanks

  11. garry | November 17, 2009 at 11:50 am | Permalink

    does anyone know a webdeveloper that can add contributions to old asp sites my head is hurting trying to find a solution to adding a feed to an old asp site.

  12. Mohan | November 20, 2009 at 12:35 pm | Permalink

    Hi this is a great post for people new to MVC like me.
    I do have a question though.
    I have an ajax form that posts some data and then after that is posted is it possible to load the jqgrid with a different json data?
    Thanks

    Response: Can you elaborate on your question? I don’t understand precisely what you want to do.

  13. Hussain | November 26, 2009 at 10:32 pm | Permalink

    If some body fine the solution of jqgrid plug in with asp.net 2.0 then please post the link from that i can see the demo or code to do the same thing

  14. Ranjith | March 25, 2010 at 11:54 pm | Permalink

    Is there any vb.net exaple using Jq Grid.

  15. John Kaster | March 26, 2010 at 6:05 pm | Permalink

    Hey Craig - I was just looking at jqGrid again, and it appears the licensing has changed to be commercial only. Am I missing something? Is there still an open source version of jqGrid?

    Response: jqGrid itself is still open source. You can get it here:

    http://www.trirand.com/blog/?page_id=6

    However, its authors are now selling non-open-source components to connect it with ASP.NET and ASP.NET MVC and PHP.

    You can of course use the grid without these components.

  16. Robin van der Knaap | June 8, 2010 at 12:45 pm | Permalink

    Just created a jqGrid fluent html helper for asp.net mvc. Supports most base properties, events and methods, including sorting, paging and toolbar searching. I wrote about it on my blog.
    Sample application here. Source is hosted on github

    Hope someone finds it useful.

  17. desno | November 3, 2010 at 3:09 am | Permalink

    i use asp.net mvc2
    is possibl to use jqgrid in my application?

  18. Ram | November 14, 2011 at 9:20 am | Permalink

    first of all, the grid works great. Thank you.

    In my MVC project, I’m using 3 grid on the same page with partial views.

    Whenever I click on sorting columns all 3 grids are getting sorted and hence its becoming slow.

    I’m using different div ids for each grid, pager, etc. However, the columns on the grids are similar but different database tables.

    Any ideas?

  19. Nelson Rivers | July 15, 2014 at 12:08 pm | Permalink

    If you could make a series of videos showing how to use jqGrid with MVC it would be much better. Also, using jqGrid with a WCF server instead of a web service would be helpful t

{ 3 } Trackbacks

  1. [...] Using jqGrid with ASP.NET MVC: Introduction Using jqGrid with ASP.NET MVC: LINQ Extensions Using jqGrid with ASP.NET MVC: Finally, A Solution Using jqGrid with ASP.NET MVC: Search and Formatting Using jqGrid with ASP.NET MVC: Deleting Records Using jqGrid with ASP.NET MVC: Understanding LINQ Errors This entry was posted in Links and tagged ASP.NET, jqGrid, jQuery, MVC by Tuan Nguyen. Bookmark the permalink. [...]

  2. Zerkle | November 18, 2014 at 10:35 am | Permalink

    [...] for that column. For apparent reasons, these are mostly a same. we have a prolonged array of posts, starting here, that explains all of this in good [...]

  3. [...] we wrote a brief essay on the advantages and disadvantages in some-more detail, though with an ASP.NET MVC [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

Bad Behavior has blocked 713 access attempts in the last 7 days.

Close