Using jQuery Grid With ASP.NET MVC

code, asp.net mvc 0 comments suggest edit

Tim Davis posted an updated version of this solution on his blog. His includes the following:

  • jqGrid 3.8.2
  • .NET 4.0 Updates
  • VS2010
  • jQuery 1.4.4
  • jQuery UI 1.8.7

Continuing in my pseudo-series of posts based on my ASP.NET MVC Ninjas on Fire Black Belt Tips Presentation at Mix (go watch it!), this post covers a demo I did not show because I ran out of time. It was a demo I held in my back pocket just in case I went too fast and needed one more demo.

A common scenario when building web user interfaces is providing a pageable and sortable grid of data. Even better if it uses AJAX to make it more responsive and snazzy. Since ASP.NET MVC includes jQuery, I figured it’d be fun to use a jQuery plugin for this demo, so I chose jQuery Grid.

After creating a standard ASP.NET MVC project, the first step was to download the plugin and to unzip the contents to my scripts directory per the Installation instructions.

jquery-grid-scripts

For the purposes of this demo, I’ll just implement this using the Index controller action and view within the HomeController.

With the scripts in place, go to the Index view and add the proper call to initialize the jQuery grid. There are three parts to this:

First, make sure to add the required script and CSS declarations.

<link rel="stylesheet" type="text/css" href="/scripts/themes/coffee/grid.css" 
  title="coffee" media="screen" />
<script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.js" type="text/javascript"></script>
<script src="/Scripts/js/jqModal.js" type="text/javascript"></script>
<script src="/Scripts/js/jqDnR.js" type="text/javascript"></script>

Notice that the first line contains a reference to the “coffee” CSS file. There are multiple themes included and when you choose a theme, you need to be sure to include the theme’s CSS file. I chose coffee, because I drink a lot of it.

The Second step is to initialize the grid with a bit of JavaScript. This looks a bit funky if you’re not used to jQuery, but I assure you, it’s pretty straightforward.

<script type="text/javascript">
    jQuery(document).ready(function(){ 
      jQuery("#list").jqGrid({
        url:'/Home/GridData/',
        datatype: 'json',
        mtype: 'GET',
        colNames:['Id','Votes','Title'],
        colModel :[
          {name:'Id', index:'Id', width:40, align:'left' },
          {name:'Votes', index:'Votes', width:40, align:'left' },
          {name:'Title', index:'Title', width:200, align:'left'}],
        pager: jQuery('#pager'),
        rowNum:10,
        rowList:[5,10,20,50],
        sortname: 'Id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: '/scripts/themes/coffee/images',
        caption: 'My first grid'
      }); 
    }); 
</script>

There are a few things you’ll have to be sure to configure here. First is the url property which points to the URL that will provide the JSON data. Notice that the value is /Home/GridData which means we’ll be implementing an action method named GridData soon. During the course of this post, we’ll change that property to point to different action methods.

The colNames property contains the display names for each column separated by columns. Ideally it should match up with the items in the colModel property.

The colModel property is an array that is used to configure each column of the grid, allowing you to specify the width, alignment, and sortability of a column. The index property of a column is an important one as that is the value that is sent to the server when sorting on a column.

See the documentation for more details on the HTML and JavaScript used to configure the grid.

The Third step is to add a bit of HTML to the page which will house the grid.

<h2>My Grid Data</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

With this in place, it’s time to implement the GridData action method to return the JSON in the proper format.

But first, let’s take a look at the JSON format expected by the grid. From the documentation, you can see it will look something like:

{ 
  total: "xxx", 
  page: "yyy", 
  records: "zzz",
  rows : [
    {id:"1", cell:["cell11", "cell12", "cell13"]},
    {id:"2", cell:["cell21", "cell22", "cell23"]},
      ...
  ]
}

The documentation I linked to also provides some gnarly looking PHP code you can use to generate the JSON data. Fortunately, you won’t have to deal with that. By using the Json helper method with an anonymous object, we can write some relatively clean looking code which looks almost just like the spec. Here’s my first cut of the action method, just to get it to display some fake data.

public ActionResult GridData(string sidx, string sord, int page, int rows) {
  var jsonData = new {
    total = 1, // we'll implement later 
    page = page,
    records = 3, // implement later 
    rows = new[]{
      new {id = 1, cell = new[] {"1", "-7", "Is this a good question?"}},
      new {id = 2, cell = new[] {"2", "15", "Is this a blatant ripoff?"}},
      new {id = 3, cell = new[] {"3", "23", "Why is the sky blue?"}}
    }
  };
  return Json(jsonData, JsonRequestBehavior.AllowGet);
}

A couple of things to point out. The arguments to the action methods are named according to the query string parameter names that jQuery grid sends via the Ajax request. I didn’t choose those names.

By naming the arguments to the action method exactly the same as what is in the query string, we have a very convenient way to retrieve these values. Remember, arguments passed to an action method should be treated with care.Never trust user input!

In this example, we statically create some JSON data and use the Json helper method to return the data back to the grid and Voila! It works!

jquery-grid-demo

Yeah, this is great for a simple demo, but I use a real database to store my data! Understood. It’s time to hook this up to a real database. As you might guess, I’ll use the HaackOverflow database for this demo as well as LinqToSql.

I’ll assume you know how to add a database and create a LinqToSql model already. If not, look at the source code I’ve included. Once you’ve done that, it’s pretty easy to transformat the data we get back into the proper JSON format.

public ActionResult LinqGridData    (string sidx, string sord, int page, int rows) {
  varnew HaackOverflowDataContext();

  var jsonData = new {
    total = 1, //todo: calculate
    page = page,
    records = context.Questions.Count(),
    rows = (
      from question in context.Questions
      select new {
        id = question.Id,
        cell = new string[] { 
          question.Id.ToString(), question.Votes.ToString(), question.Title 
        }
      }).ToArray()
  };
  return Json(jsonData, JsonRequestBehavior.AllowGet);
}

Note that the method is a tiny bit busier, but it follows the same basic structure as the JSON data. After changing the JavaScript code in the view to point to this action instead of the other, we can now see the first ten records from the database in the grid.

But we’re not done yet. At this point, we want to implement paging and sorting. Paging is pretty easy, but sorting is a bit tricky. After all, what we get passed into the action method is the name of the sort column. At that point, we want to dynamically create a LINQ expression that sorts by that column.

One easy way to do this is to use the Dynamic Linq Query library which ScottGu wrote about a while back. This library adds extension methods which make it easy to create more dynamic Linq queries based on strings. Of course, with great power comes great responsibility. Make sure to validate the strings before you pass them into the methods. With this in place, we rewrite the action method to be (warning, DEMO CODE AHEAD!):

public ActionResult DynamicGridData
    (string sidx, string sord, int page, int rows) {
  var context = new HaackOverflowDataContext();
  int pageIndex = Convert.ToInt32(page) - 1;
  int pageSize = rows;
  int totalRecords = context.Questions.Count();
  int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

  var questions = context.Questions
    .OrderBy(sidx + " " + sord)
    .Skip(pageIndex * pageSize)
    .Take(pageSize);

  var jsonData = new {
    total = totalPages,
    page = page,
    records = totalRecords,
    rows = (
      from question in questions
      select new {
        id = question.Id,
        cell = new string[] {
          question.Id.ToString(), question.Votes.ToString(), question.Title 
        }
    }).ToArray()
  };
  return Json(jsonData, JsonRequestBehavior.AllowGet);
}

Some things to note: The first part of this method does some initial calculations to figure out the number of pages we’re dealing with based on the page size (passed in) and the total record count.

Then given that info, we use the Dynamic Linq extension methods to do the actual paging and sorting via the line:

var questions = context.Questions.OrderBy(…).Skip(…).Take(…);

Once we have that, we can simply transform that into the array that jQuery grid expects and place that in the larger JSON payload represented by the jsonData variable.

With all this in place, you now have a pretty snazzy approach to paging and sorting data using AJAX. Now go forth and wow your customers. ;)

And before I forget, here’s the sample project that uses all three approaches.

Found a typo or error? Suggest an edit! If accepted, your contribution is listed automatically here.

Comments

avatar

154 responses

  1. Avatar for Jarrett
    Jarrett April 14th, 2009

    This. Rocks. Much love for MVC and all who do such great work with it.

  2. Avatar for Mike Enriquez
    Mike Enriquez April 14th, 2009

    Thanks for the article. I've been fighting with an app (ASP.NET with Infragistics grids) that requires the same functionality.
    Need to convince the boss to move to this... I can't wrap my head around the Postback model :(

  3. Avatar for lizai
    lizai April 14th, 2009

    its so great! Thanks Phil!

  4. Avatar for Mohammad Azam
    Mohammad Azam April 14th, 2009

    Hi Phil,
    Awesome post! I am really glad that JQuery includes a Grid control or else we will have to run loops and create tables. I am wondering that if third party tool vendors will start creating MVC controls.

  5. Avatar for Barranger
    Barranger April 14th, 2009

    Any chance of getting a snippet of adding the edit and delete links?

  6. Avatar for condition
    condition April 14th, 2009

    i want to add condition in query.
    how to do it?

  7. Avatar for born2code
    born2code April 14th, 2009

    cool. I am using the exact same thing, using jqGrid and MVC, in a production app except I use MySQL as the back end. I use a stored procedure to retrieve the data and then a little helper to convert the DataRows to json.
    There is no real good way to use LINQ with MySQL while using stored procedures, so i had to roll out my own "poor man's ORM".
    I have a question about the Skip() and Take(). How does that translate to actual SQL? does LINQ end up retrieving all the rows and then extracting the required ones? or does it leverage things like TOP to only retrieve the required subset?

  8. Avatar for Farrio
    Farrio April 14th, 2009

    Thanks Phil but I got an error when I just copied your code. It said object does not support the method or the property when it invoked jQuery("#list").jqGrid({
    I'm pretty sure that I've pasted all js files and added the script elements. Can you help me?

  9. Avatar for Shiju Varghese
    Shiju Varghese April 14th, 2009

    Thanks Phil for the very useful post.

  10. Avatar for PK
    PK April 14th, 2009

    @born2code: I love Linq2Sql and I've had a huge amount of success with L2S + stored procs, so i'm not sure why you're not having much luck with that. Also, the linq SKIP and TAKE does make use of the TOP query and i think a where clause with count, i think. it's been ages since i looked at the sql it generates. it does NOT pull back all the records and THEN page those results. It only pulls back the 'page' required.
    @Phil: another great article! I have a quick question about this post. DISCLAIMER: I've not downloaded the project source, so i've not looked at the full code. The action method you've written is GREAT for some AJAX magic. What about when you first hit the resource (eg. /home/index) .... how do u populate the grid then? You do not? you have an empty grid and then make another call, via ajax, to populate it? I'm a huge fan of ajax but would you consider populating the grid when the resource first gets hit, reducing one more call. I know it sounds like like this is another case for premature optimization (anti-pattern), but I generally like to render the view fully if possible and use ajax for user interaction. I would love your thoughts on this.
    -PK-

  11. Avatar for Zachary Snow
    Zachary Snow April 14th, 2009

    The line:
    jQuery(document).ready(function(){
    });
    can be shortened to:
    jQuery(function(){
    });
    and even further if you use the $:
    $(function(){
    });

  12. Avatar for Craig Stuntz
    Craig Stuntz April 14th, 2009

    Weird. I just started a series of posts on using the same component yesterday:
    blogs.teamb.com/craigstuntz/2009/04/14/38200/
    I'm using a completely different method to send data to the grid, however. The grid supports two different ways of sending the data in JSON format: a cell array (what you use in this post) and with named columns. I'm going to show the second method, along with extension methods for IQueryable which allow you to transform any IQueryable integrated data, without having to know the names of the individual fields on the contained element type. Thus, it works really well for anonymous types, which I find very well suited for JSON serialization, since they can be guaranteed not to have cycles in the object graph.
    Anyway, thanks for posting this, and I will get the rest of my own series up soon!

  13. Avatar for Joe Reynolds
    Joe Reynolds April 14th, 2009

    Very nice stuff. However, is there any way to use this jquery plugin (or some other) to gain more control of the formatted output? I'm looking for something like this that allows data display/paging using MVC in a way similar to what can be done with the ASP.NET Repeater control.

  14. Avatar for tawani
    tawani April 14th, 2009

    @born2code
    Ling2Sql uses something like this in SQL 2005:
    DECLARE @PageNum AS INT;
    DECLARE @PageSize AS INT;
    SET @PageNum = 2;
    SET @PageSize = 10;
    WITH OrdersRN AS
    (
    SELECT ROW_NUMBER() OVER(ORDER BY OrderDate, OrderID) AS RowNum
    ,OrderID
    ,OrderDate
    ,CustomerID
    ,EmployeeID
    FROM dbo.Orders
    )
    SELECT *
    FROM OrdersRN
    WHERE RowNum BETWEEN (@PageNum - 1) * @PageSize + 1
    AND @PageNum * @PageSize
    ORDER BY OrderDate, OrderID;

  15. Avatar for Craig Stuntz
    Craig Stuntz April 14th, 2009

    Here are the extension methods I wrote to turn any IQueryable into data suitable for the grid:
    blogs.teamb.com/craigstuntz/2009/04/15/38212/

  16. Avatar for born2code
    born2code April 14th, 2009

    @PK && @Tawani: Thanks for the feedback about Linq2SQL optimization. I was hoping it does this. I use MySQL and not MS SQL much these days (i use what ever my clients require and recently it is all MySQL). There is no good support from the MySQL native ADO.NET Connector for the Entity Framework. nHibernate and others do not support Stored procedures.
    I tried other frameworks/driver combinations and ran into various issues with each. I am developing production applications so I cannot have an "almost working" solution, or something that would behave unexpectedly, on occasion, during real life usage.
    I had one of those with the anti forgery tokens when deployed to a shared host and all of the sudden started getting ViewState encryption errors because the anti forgery token code used (at the time) a shared cookie.
    Couple more occurences like this and the client loses confidence in MVC (and my work) :)
    @Joe Reynolds: it is very easy to roll out your own "repeater" control with jQuery and MVC. You use jQuery like Phil did to retrieve the rows of a specific page (you can pass the page number to the MVC method) and then write a User Control that binds to the data. You can either bind the JSON results from your method, or you can use ActionResults to return a partial view and replace the content of a div. pretty cool, and i do it all the time.

  17. Avatar for born2code
    born2code April 14th, 2009

    @PK && @Tawani: Thanks for the feedback about Linq2SQL optimization. I was hoping it does this. I use MySQL and not MS SQL much these days (i use what ever my clients require and recently it is all MySQL). There is no good support from the MySQL native ADO.NET Connector for the Entity Framework. nHibernate and others do not support Stored procedures.
    I tried other frameworks/driver combinations and ran into various issues with each. I am developing production applications so I cannot have an "almost working" solution, or something that would behave unexpectedly, on occasion, during real life usage.
    I had one of those with the anti forgery tokens when deployed to a shared host and all of the sudden started getting ViewState encryption errors because the anti forgery token code used (at the time) a shared cookie.
    Couple more occurences like this and the client loses confidence in MVC (and my work) :)
    @Joe Reynolds: it is very easy to roll out your own "repeater" control with jQuery and MVC. You use jQuery like Phil did to retrieve the rows of a specific page (you can pass the page number to the MVC method) and then write a User Control that binds to the data. You can either bind the JSON results from your method, or you can use ActionResults to return a partial view and replace the content of a div. pretty cool, and i do it all the time.
    ha ha, to prove my point, i got a server error 500 trying to post the comment... and when i tried to resend I got a message about a 1 minute delay between comments... exactly the things i do not need in a production environment :)

  18. Avatar for Mario
    Mario April 14th, 2009

    Thanks Phil, really usefull post!

  19. Avatar for devinterview
    devinterview April 15th, 2009

    You made my day. Love jquery and MVC.

  20. Avatar for Haacked
    Haacked April 15th, 2009

    @PK Yeah, this is just the approach that jQuery grid takes where it makes the extra request for data. I personally think it's fine in this case since you can render the full page quickly and the data just pops in when it's ready.
    There are other Ajax grids that have different behaviors. I know there's an ExtJS one that "ajaxifies" an HTML table. That one might fit the approach you want better.

  21. Avatar for Pure Krome
    Pure Krome April 15th, 2009

    Thanks Phil for the reply :)

  22. Avatar for Chris
    Chris April 15th, 2009

    Hey Phil,
    Do you ever run into an issue where you add certain js files from jQuery and intellisense ($ && jQuery) go away? I've noticed this with sometimes the order of the js files or which ones I include, and in this case, included exactly the ones you have, but not getting intellisense for anything.
    Ideas?

  23. Avatar for Thanigainathan.S
    Thanigainathan.S April 15th, 2009

    Hei,
    Thats really rocking. Customers will be happy if they see these kind of things.
    Thanks,
    Thani

  24. Avatar for Craig Stuntz
    Craig Stuntz April 15th, 2009

    JqGrid actually does have a feature which takes a regular HTML table and turns it into a jqGrid, data and all. However, this means that you are now supplying data to the grid in two very different ways. First, via an aspx/ascx and secondly via JSON. That makes the code to do this somewhat odd, although with enough work it could probably be rolled together so that the two bits of code used the same model.
    www.secondpersonplural.ca/.../_2h30t8wte.htm

  25. Avatar for Peter.O
    Peter.O April 15th, 2009

    Hi Phil,
    The post was easy to follow and worked the first time.
    I don't know if it's an 'acquired taste' or just pain all the way. But when I finished, it left this sore feeling that there's too much 'string'iness around it. Table nesting really does feel cleaner than the jqGrid implementation.
    In addition, table nesting and LINQ paging affords me easier server-side control over how much data actually gets fetched from the server per request ie: one page full.
    Cool theming support there but it has a low priority.

  26. Avatar for Yazilim
    Yazilim April 17th, 2009

    Pretty cool, using this and a little bit of blogs.teamb.com/craigstuntz/2009/04/17/38229/ than i have a nice solution :)

  27. Avatar for Jack
    Jack April 17th, 2009

    Cool, the style is quite fashion!

  28. Avatar for Irfan
    Irfan April 17th, 2009

    I am writing a series of similar articles for ExtJS. Please have a look at this article:
    www.dottostring.com/.../adding-support-for-net-...
    But I am using WebMethods instead of writing my code in Page_Load and think this would increase efficiency of your site.

  29. Avatar for Tracker1
    Tracker1 April 18th, 2009

    Where were you a month ago.. lol. BTW the beta jqGrid ties in with the gQueryUI's skinning much better... May have to do a followup article. (note: I had to adjust jqGrid a bit, and added some additional love for attaching an external form's data to the jqGrid requests. Nice article though, took me a bit of effort to figure out the returns needed for jqGrid based on the PHP code. Also, there's a few othe jquery based grids out there, imho jqGrid offers the best usability.

  30. Avatar for Tomas
    Tomas April 18th, 2009

    First of all I must say it's a great blog that most certainly is great help to a lot of people out there.
    The question I have is how can you make this unobtrusive? I know that almost everyone has javascript enabled today, but is there an easy way to help those that hasn’t? I guess that the solution is to make the check on the server and provide a different view if javascript is not enabled, or can it be made easier?

  31. Avatar for Mike
    Mike April 19th, 2009

    Getting the same error as Farrio during the initial display of the grid when the page loads "Microsoft JScript runtime error: Object doesn't support this property or method"
    Has anyone else got this a figured it out?

  32. Avatar for Rob
    Rob April 19th, 2009

    I am also getting "Microsoft JScript runtime error: Object doesn't support this property or method", I am pretty new to JQuesry so I apologise if this is something that is obvious but can't seem to fix it at the moment.

  33. Avatar for jyotishka bora
    jyotishka bora April 19th, 2009

    very nice..

  34. Avatar for Paresh
    Paresh April 19th, 2009

    Hi,
    Yeah i too had got the same issue that Mike and Rob are facing currently.In firebug it shows the error as "jQuery("#list").jqGrid is not a function." I verified the path of all the js files included.
    please let me know if there is any solution to fix this issue.

  35. Avatar for Andrey
    Andrey April 20th, 2009

    Guys (those how have problem with "jqGrid is not a function" error message), you need to go to jquery.jqGrid.js file and update the line:
    >> var pathtojsfiles = "js/"; // need to be ajusted
    Update it to whatever your path to js files is. For me, this action fixed the problem.

  36. Avatar for Praveen
    Praveen April 20th, 2009

    Thanks for the article, Phil. I am trying to implement jqGrid within the standard ASP .NET application using MS AJAX web methods. How does one go about it? Do you have solutions you can point me to?
    Thanks for your time.
    Regards,
    Praveen

  37. Avatar for Jim
    Jim April 21st, 2009

    Where is the source code for this post? I really want a working version to compare exactly what I have done wrong to get rid of the errors talked about above? I have checked each and every js file path so doubt that is the problem.

  38. Avatar for Andrey
    Andrey April 21st, 2009

    Everyone, please be aware that jqGrid number pages from 1, not from 0!
    So page parameter for the first page is actually 1.
    If you utilize, for example class PagedList - it accepts as input page index which is assumed to be zero-based.

  39. Avatar for Haacked
    Haacked April 22nd, 2009

    @Jim I posted the link to the source at the bottom of the post. You can grab it from here.

  40. Avatar for Jim
    Jim April 22nd, 2009

    Brilliant! Thanks a lot

  41. Avatar for Paresh
    Paresh April 22nd, 2009

    Hi Guys,
    Does the solution suggested by Andrey solve the above error?
    It doesn't worked for me.

  42. Avatar for Will
    Will April 22nd, 2009

    Hi Guys,
    Does the solution suggested by Andrey solve the above error?
    It doesn't worked for me.


    Worked for me. I changed:
    var pathtojsfiles = "js/";
    to
    var pathtojsfiles = "/Scripts/js/"

  43. Avatar for Petr
    Petr April 26th, 2009

    Without enabled js unaccessible, google can't index content, very poor implementation ...

  44. Avatar for Sean
    Sean April 26th, 2009

    @born2code: According to LINQPad,
    Purchases.OrderBy (p => p.Price).Skip (5).Take(3)
    becomes
    SELECT [t1].[ID], [t1].[CustomerID], [t1].[Date], [t1].[Description], [t1].[Price] FROM ( SELECT ROW_NUMBER() OVER (ORDER BY [t0].[Price]) AS [ROW_NUMBER], [t0].[ID], [t0].[CustomerID], [t0].[Date], [t0].[Description], [t0].[Price] FROM [Purchase] AS [t0] ) AS [t1] WHERE [t1].[ROW_NUMBER] BETWEEN @p0 + 1 AND @p0 + @p1 ORDER BY [t1].[ROW_NUMBER]

  45. Avatar for BeullaBoris
    BeullaBoris April 28th, 2009

    I am still getting the object not supported issue. I have changed the var pathtojsfiles and everytime I run and debug it changes the path back to the original.
    Any help?

  46. Avatar for Zachary Scott
    Zachary Scott May 3rd, 2009

    Two huge benefits this article brings:
    1.) The C# class encoded as Json is fantastic. I was wondering how you could serialize Linq to SQL Classes. This provides one very nice way to do it.
    2.) The disclaimers help understand where these techniques fit in the Agile and DDD realms. They hint where they fit.
    What would be good would be to tie these articles in to a big map of all the technology. For example, a dot that would explain "sanatize your inputs", a dot that explains a repository, and a dot that says "you are here".
    These blog posts like this are extremely helpful.

  47. Avatar for Fernando Soruco
    Fernando Soruco May 10th, 2009

    how do transform c# json to visual basic .net for example : thisvar jsonData = new {
    total = totalPages,
    page = page,
    records = totalRecords,
    rows = new[]{
    new {id = 1, cell = new[] {"1", "-7", "Is this a good question?"}},
    new {id = 2, cell = new[] {"2", "15", "Is this a blatant ripoff?"}},
    new {id = 3, cell = new[] {"3", "23", "Why is the sky blue?"}}
    }
    };
    how to pass it to visual basic .net , help plz

  48. Avatar for Ian
    Ian May 14th, 2009

    Has anyone had any problems with the pager not working with jqgrid
    I set up jqgrid with a URL to fetch the data and it returns the first page fine I can page by typing a number in the page box which fires the ajax call to the server and returns the correct page but pressing the previous and text buttons does nothing. The ajax call doesn't even fire.

  49. Avatar for Ian
    Ian May 17th, 2009

    I solved my own problem obviously in Phils demo code he hadn't returned the total number of pages and therefore the paging in the jqGrid didn't work.

  50. Avatar for Chris
    Chris June 1st, 2009

    Never occurred to me to use JSON with JQuery. That's awesome!

  51. Avatar for Vladimir Kelman
    Vladimir Kelman June 2nd, 2009

    In "Dynamic Linq Query library" article ScottGu said, "In a future blog post I'll delve further into building dynamic LINQ queries, and discuss other approaches you can use to structure your code using type-safe predicate methods". He never did it, but those type-safe methods are described here www.albahari.com/nutshell/predicatebuilder.aspx and here http://tomasp.net/blog/dynamic-linq-queries.aspx. I hope we can use them instead of Dynamic Linq Query library to avoid using strings.

  52. Avatar for stan4th
    stan4th June 7th, 2009

    Hi,
    Thanks for this article.
    I tried finding in the documentation - is there any feature for providing filtering of rows?
    Cheers

  53. Avatar for Sigur&#240;ur Bjarnason
    Sigur&#240;ur Bjarnason December 18th, 2009

    Very nice article, but i think that the source has been corrupted because i am unable to extract the zip file.

  54. Avatar for mike
    mike December 21st, 2009

    Have been trying to get this to work with no success. When debugging I am noticing that the url:'/Home/GridData/' is getting called. There is no data in the grid however? Could this be because I am using a masterpage. I have also tried '../../home/griddata' with no success.

  55. Avatar for mike
    mike December 21st, 2009

    Solved my own error. Anyone using MVC2 Must use this to allow Get Json.
    return Json(jsonData, JsonRequestBehavior.AllowGet);
    Now the grid is finding 3 rows but text is displayed.

  56. Avatar for mike
    mike December 21st, 2009

    Works now! Thanks for the great tutorial!

  57. Avatar for Ryan
    Ryan December 24th, 2009

    Thanks mike, this one has been bugging me for about an hour and I saw your post, and wala...

  58. Avatar for Prajakta
    Prajakta December 29th, 2009

    How to pass the querystring to the action method?

  59. Avatar for Jason
    Jason January 4th, 2010

    I tried to download the source code and am getting an error when I try to open the ZIP file.
    The error:
    "The archive is either in unknown format or damaged."

  60. Avatar for Ajay
    Ajay January 4th, 2010

    Hi,
    the attached code zip file is corrupted. Can't open the file. Phil, is there any way to get to the zip file?
    Thanks.

  61. Avatar for Tom
    Tom January 20th, 2010

    the download errors when i try to open the zip. It seems the file is corrupted. Can you post a new download please?

  62. Avatar for Luka
    Luka January 20th, 2010

    the file seems to be corrupted.can you reupload it?

  63. Avatar for Michael Ceranski
    Michael Ceranski January 22nd, 2010

    My initial impression of jqGrid was WOW. I actually started using it in a application that I was developing until I realized that I was doing too much work to make it perform tasks that should be rather simple. IMHO, there is still no replacement for good ol' HTML tables customized with a little jQuery and/or Ajax.
    Just from reading the comments, it seems like people are having problems making jqGrid work. From personal experience the documentation for jgGrid is sparse and not very well done.
    If it helps anyone, I also wrote an article about using jqGrid with MVC on my blog Using jqGrid with asp.net MVC.

  64. Avatar for Bats Ihor
    Bats Ihor January 26th, 2010

    Phil, please update the sources file....

  65. Avatar for Sam
    Sam February 9th, 2010

    Thanks Mike for this MVC2 tip:
    return Json(jsonData, JsonRequestBehavior.AllowGet);

  66. Avatar for Peg
    Peg February 21st, 2010

    The download is still corrupted...would you mind uploading a valid .ZIP???

  67. Avatar for WhamBham
    WhamBham February 26th, 2010

    The download source file is corrupt. Can you please reissue a new archive to this article? Cheers.

  68. Avatar for Eduardo
    Eduardo February 26th, 2010

    Hi Phil !
    The example in zip format is corrupted, is possible to put the example in a correct file ?
    Thanks in advance
    Eduardo

  69. Avatar for liji
    liji March 2nd, 2010

    thanks mike,solved my problem

  70. Avatar for haacked
    haacked March 3rd, 2010

    Hi All, I fixed the download link. Sorry for the corrupted file.

  71. Avatar for Qamar Uddin
    Qamar Uddin March 17th, 2010

    Hi guys,
    Anyone has the VB.Net version of the controller code of this project

  72. Avatar for TWaldron
    TWaldron March 19th, 2010

    Thanks Mike for the MVC2 Comment. This was killing me.
    Anyone know how I could pass a date parameter for to the controller as well?
    I want to have a datepicker that will control the data in the grid based on the date picked.

  73. Avatar for Ranjith
    Ranjith March 25th, 2010

    Hi,
    I am using sample example in vb.net. but It throws error in(lambda parameter not in scope)
    Dim jsondata = New With {.total = totalPages, .page = page, .records = totalRecords, _
    .rows = (From Product In lobjProducts Select New With {.ProductID = Product.ProductID, _
    .cell = New String() {Product.ProductID, Product.Title.ToString(), Product.Description.ToString(), Product.IsActive.ToString()}}).ToArray()}

    I search a lot, nobody can implement in vb.net.
    .cell = New String() ----here I didn't get the values.
    please help me.

  74. Avatar for Chris
    Chris April 26th, 2010

    One thing I noticed that gave me problems. Make sure you change...
    <script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    ...to the correct version. Mine was jquery-1.4.1.js, for example. Changed this and all was well.

  75. Avatar for Coding Pill
    Coding Pill April 28th, 2010

    Nice One Phil ... hope to repay you one day

  76. Avatar for Bhavin Patel
    Bhavin Patel May 5th, 2010

    hi Haack,
    i have downloaded ur demo project and i worked on that and i run it but in out put it shows only empty grid no single data shows why its like that?whats a problem with it? i have made the similar project like you but the result was similar not a different.i got the data at the jsondata on home controller class but not shows on the output page.i am using the linq to sql.i tried your all the tree methods on the home controller class,i found the similar result.Can you guide me regarding that,so i can go ahead in MVC.
    Regards,
    Bhavin Patel

  77. Avatar for Ramesh Kadirisani
    Ramesh Kadirisani May 10th, 2010

    Fix for .OrderBy(sidx + " " + sord) issue:
    While working with this example, many users might have experienced the problem with the above line (I am newbie in .NET MVC world so please excuse me if the fix that i mentioned is not correct).
    i used the following fix and thought could be useful to others:
    //Comment the following lines
    /*
    var questions = context.Questions
    .OrderBy(sidx + " " + sord)
    .Skip(pageIndex * pageSize)
    .Take(pageSize);
    */
    //Add the following code
    var question = (sord == "asc") ?
    context.Questions
    .OrderBy(new Func<Questions, IComparable>(Questions => (IComparable)GetPropertyValue(Questions,sidx)))
    .Skip(pageIndex * pageSize)
    .Take(pageSize)
    :
    context.Questions
    .OrderByDescending(new Func<Questions, IComparable>(Questions => (IComparable)GetPropertyValue(tblElectionContest, sidx)))
    .Skip(pageIndex * pageSize)
    .Take(pageSize);

    //Now add the following method in your controller
    //(Author of this following method is : Kjetil Watnedal)
    public object GetPropertyValue(object obj, string property)
    {
    System.Reflection.PropertyInfo propertyInfo = obj.GetType().GetProperty(property);
    return propertyInfo.GetValue(obj, null);
    }

  78. Avatar for Ramesh Kadirisani
    Ramesh Kadirisani May 10th, 2010

    Fix for .OrderBy(sidx + " " + sord) issue:
    While working with this example, many users might have experienced the problem with the above line (I am newbie in .NET MVC world so please excuse me if the fix that i mentioned is not correct).
    i used the following fix and thought could be useful to others:
    //Comment the following lines
    /*
    var questions = context.Questions
    .OrderBy(sidx + " " + sord)
    .Skip(pageIndex * pageSize)
    .Take(pageSize);
    */
    //Add the following code
    var question = (sord == "asc") ?
    context.Questions
    .OrderBy(new Func<Questions, IComparable>(Questions => (IComparable)GetPropertyValue(Questions,sidx)))
    .Skip(pageIndex * pageSize)
    .Take(pageSize)
    :
    context.Questions
    .OrderByDescending(new Func<Questions, IComparable>(Questions => (IComparable)GetPropertyValue(Questions, sidx)))
    .Skip(pageIndex * pageSize)
    .Take(pageSize);

    //Now add the following method in your controller
    //(Author of this following method is : Kjetil Watnedal)
    public object GetPropertyValue(object obj, string property)
    {
    System.Reflection.PropertyInfo propertyInfo = obj.GetType().GetProperty(property);
    return propertyInfo.GetValue(obj, null);
    }

  79. Avatar for Bhavin Patel
    Bhavin Patel May 12th, 2010

    hi Ramesh
    i tried you code because i got the error during the binding the JQGrid,it remove the error and shows the data on screen but i tried to sorting the column but its reject the result was similar not change anything in that.
    why is like that?
    can you guide me regarding that please...........
    i am waiting for your response...

  80. Avatar for Ramesh Kadirisani
    Ramesh Kadirisani May 27th, 2010

    hi Bhavani Patel,
    sorry i did not check this blog in a while. i started using the dynamic linq library and found the work around much easier than the way i explained before. please check the following web site for reference:
    weblogs.asp.net/...
    if you are not sure on how to use dynamic linq library, please let me know.

  81. Avatar for Robin van der Knaap
    Robin van der Knaap June 7th, 2010

    I created a HtmlHelper for jqGrid with a fluent interface. The helper implements most base properties, methods and events from jqGrid, including paging, sorting and toolbar searching.
    You can read about it at here. Sample app here. Source code is hosted on github
    Hope somebody will find it useful.

  82. Avatar for Manuel Castro
    Manuel Castro June 15th, 2010

    You can create a link to your edit / delete actions with a custom formatter for the column, in you colModel define the name of the custom function:
    [code]
    { name: 'EquiptmentID', index: 'EquiptmentID', width: 80, formatter: linkEdit },
    [/code]
    And later in your javascript code create the action link:
    [code]
    function linkEdit(cellvalue, options, rowObject) {
    return "" + cellvalue + "";
    }
    [/code]

  83. Avatar for Mike
    Mike July 16th, 2010

    Anybody get this working with entity framework 4?
    LINQ to Entities does not recognize the method 'System.String ToString()' method, and this method cannot be translated into a store expression.
    var jsonData = new
    {
    total = totalPages,
    page = page,
    records = totalRecords,
    rows = (
    from x in gridData
    select new
    {
    i = x.noteid,
    cell = new string[] { x.noteid.ToString(), x.username, x.addeddate, x.title, x.note }
    }).ToArray()
    };

  84. Avatar for James
    James July 25th, 2010

    I am running into error when I tried to run the sample project. It says "A project with an output type of class library cannot be started directly. In order to debug this add an executable project which references the library project. Set the executable project as the start up project. "
    What am I doing wrong? Please help.
    Thanks in advance.

  85. Avatar for Leon
    Leon July 26th, 2010

    This solution isn't work on VS2010 .Net 4.0. I don't know why. When I use debug tool I can see that data is sending into grid. But It isn't displaying on the View. Now I want to find new example or create myself solution....

  86. Avatar for shyelauto
    shyelauto July 28th, 2010

    Thank you for your post. Very Glad that you shared this to us. It's some pretty great info. Valuable information I found, keep on posting.

  87. Avatar for Randy Kreisel
    Randy Kreisel July 31st, 2010

    getting the following error when opening the database.
    Additional information: The database 'C:\PROJECTS\VS9\JQGRID MVC SAMPLE\JQUERYGRIDWEB\APP_DATA\HAACKOVERFLOW.MDF' cannot be opened because it is version 655. This server supports version 612 and earlier. A downgrade path is not supported.
    Using VS 2008
    Any suggestions??

  88. Avatar for jeff00seattle
    jeff00seattle August 2nd, 2010

    If I build this project with VS 2008 MVC 1 and using simple GridData(), then presto! it works!
    If I build this same project with VS 2010, which converts the solution to MVC 2 and also using GridData(), then blamo! The table appears but the rows do not populate.
    What difference(s) would there be to cause this disparity?

  89. Avatar for severo
    severo August 14th, 2010

    jeff00seattle, same problem for me!!! The table appears but the rows do not populate.

  90. Avatar for nader hamzei
    nader hamzei August 18th, 2010

    here is the VB.net code for the controller that some have been asking for. While I hit the controller method for MVC, and I do return a valid JSONified package, I cant get the datagrid to show any values.
    any ideas?
    Dim jsonData = New With { _
    Key .total = 1, _
    Key .page = 1, _
    Key .records = 3, _
    Key .rows = New Object() {New With { _
    Key .id = 1, _
    Key .cell = New Object() {"1", "-7", "Is this a good question?"} _
    }, New With { _
    Key .id = 2, _
    Key .cell = New Object() {"2", "15", "Is this a blatant ripoff?"} _
    }, New With { _
    Key .id = 3, _
    Key .cell = New Object() {"3", "23", "Why is the sky blue?"} _
    }} _
    }
    Return Json(jsonData)

  91. Avatar for nader hamzei
    nader hamzei August 18th, 2010

    OK, I seemed to have figured out why the data isnt coming back but it is hardly a good fix. here is the issue, If this code worked for you in MVC 1 and doesnt in VS2010 and MVC 2 that is because of changes in Json, in particular the "Get" method. this has been disallowed by default. The reason is Get can open you up to JSON Hijacking. To get the code to work, look at my previous post and change the last line to :
    Return Json(jsonData, JsonRequestBehavior.AllowGet)
    this will allow the data to return and get populated, BUT THERE IS A COST. NOW, you can possible be JSON Hijacked.
    Phil, can u wiegh in on this? Should this be depricated?

  92. Avatar for Gabriel
    Gabriel August 19th, 2010

    I have downloaded and run this sample many times. Tried to tweek it. Nothing puts data in the grid. Data is making it to the Json object but is not populating the grid. Has this been updated for VS 2010?

  93. Avatar for Gabriel
    Gabriel August 19th, 2010

    Nevermind. I just read the previous post.

  94. Avatar for Paul Speranza
    Paul Speranza September 27th, 2010

    Phil,
    I also ran into the issue with the grid not displaying the rows with MVC 2 and VS 2010.
    Looking at what Nader wrote
    Return Json(jsonData, JsonRequestBehavior.AllowGet)
    this will allow the data to return and get populated, BUT
    THERE IS A COST. NOW, you can possible be JSON Hijacked.
    What is the correct way of getting around this problem?
    Regards,
    Paul

  95. Avatar for Diego Fernando Trujillo
    Diego Fernando Trujillo October 4th, 2010

    Hello,
    Thanks a lot for the examples.
    I'm implementing jqGrid with areas in MVC2 but it doesn't show me something, i've created another MVC2 app from scratch without areas (test purposes) and all goes great.
    Could you give me some idea? (Many thanks in advance) I've leaved you my mail.
    Regards from Cali, Colombia.

  96. Avatar for brandon
    brandon October 28th, 2010

    can anyone tell me how to create a drop down menu inside a grid cell?
    Thanks

  97. Avatar for WhisperiN
    WhisperiN October 28th, 2010

    Great post, with well enough information.
    It was an idea to use that in my Url Shortening service.. but at the end.. we wrote it using PHP for better portability.
    Thanks again for this great post :)

  98. Avatar for neels
    neels October 31st, 2010

    I think that you've got a good point -- it's probably too late. Not to be pessimistic, but with the NoSQL movement gaining attention, if not traction, it seems like the major SQL RDBMSes are more concerned with competition/proving their relevancy than with standards compliance (among other things). It's a shame, really.

  99. Avatar for nahid
    nahid November 2nd, 2010

    I am using mvc2.Also included Return Json(jsonData, JsonRequestBehavior.AllowGet) in my code.It works fine when i published in a local machine or another server.but when i deployed another server it is (same code with changed url) not returning json data.Firebug says it is calling my action but returning 0 rows.
    is it the problem with that specific server(IIS 7)...or firewall??? ....Please help.

  100. Avatar for rickey123
    rickey123 November 8th, 2010


    This is highly informatics, crisp and clear. I think that Everything has been described in systematic manner so that reader could get maximum information and learn many things. This is one of the best blogs I have read.
    tattoo

  101. Avatar for sss123
    sss123 November 8th, 2010

    This is highly informatics, crisp and clear. I think that Everything has been described in systematic manner so that reader could get maximum information and learn many things. This is one of the best blogs I have read.
    San Diego remodeling company

  102. Avatar for veerana
    veerana November 12th, 2010

    This is a nice site. Good fresh UI and nice informative articles. I used mvc2.Also included Return Json(jsonData, JsonRequest Behavior.Allow-get) in my code.It works fine when i published in a local machine or another server.I will be coming back soon, thanks for the great article. 02 simplicity

  103. Avatar for Matt
    Matt November 13th, 2010

    I am using VS2010 with .NET 4.0
    Easy fix:
    - Index.aspx:
    change mType:'GET' to mType:'Post'
    - HomeController.cs
    Change
    public ActionResult DynamicGridData
    to
    public JsonResult DynamicGridData
    I am not sure this is the most efficient way to do it, but it works :)

  104. Avatar for pushpendra
    pushpendra November 20th, 2010

    I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog, I will keep visiting this blog very often.

  105. Avatar for business analyst
    business analyst November 21st, 2010

    Great work you have done by sharing them to all. simply superb. Thanks for a nice share you have given to us with such an large collection of information

  106. Avatar for miami laser hair
    miami laser hair November 24th, 2010

    This is very nice post and it is useful for all of us, keep blogging and i will come across your blog again.thanks

  107. Avatar for juliya
    juliya November 26th, 2010

    very nice ful informatiom for me . i will came across your blog again . thanks forged copper

  108. Avatar for Pariuri
    Pariuri November 30th, 2010

    This is a good post. This post give truly quality information.I'm definitely going to look into it.Really very useful tips are provided here.thank you so much.Keep up the good works.

  109. Avatar for Berry
    Berry November 30th, 2010

    Hi Great post and i'am trying to understand everything. Working with MVC was fine until the datagrid problem came up. My question is: I have to connect to a third party system which I can query with a specific language. The result is given back as a datatable with all the rows and columns. Can I connect/use this datatable as a datasource for the grid? And if so, please advise how to do this.

  110. Avatar for business analyst
    business analyst December 1st, 2010

    I definitely enjoyed every bit of it and I have you bookmarked your blog to check out the new stuff you post in the future

  111. Avatar for Personal Trainer Mission Viejo
    Personal Trainer Mission Viejo December 5th, 2010

    The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept. Thank you for the post

  112. Avatar for pablo
    pablo December 9th, 2010

    I am trying to implement this grid in the MVC2 MusicStore Tutorial, in the albums administration page, but cannot.
    I tryed doing something like this:

    var albumList = storeDB.Albums.Include("Genre").Include("Artist");
    //.OrderBy(sidx + " " + sord)
    //.Skip(pageIndex * pageSize)
    //.Take(pageSize);

    var jsonData = new
    {
    total = totalPages,
    page = page,
    records = totalRecords,
    rows = (
    from album in albumList
    select new
    {
    i = album.Title,
    cell = new string[] {
    album.Title, album.Artist.Name, album.Genre.Name
    }
    }).ToArray()
    };
    return Json(jsonData);

    But throw exceptions. How should be done. Thanks a lot in advance.

  113. Avatar for pablo
    pablo December 9th, 2010

    And also, how can I add the delete/edit links in each row. Do you have the theme css and images files? Thanks.

  114. Avatar for Charbonos
    Charbonos January 19th, 2011

    "Ninjas can't catch you if you are on fire!" Nice video, you're great.

  115. Avatar for Shane Whittet
    Shane Whittet February 18th, 2011

    When using your example with JSON/POST I got no data back due to a bug in the jquery validate plugin. It seems quite serious. My hotfix and further detail, awaiting maintainer code review, is available here:
    github.com/jzaefferer/jquery-validation/pull/45

  116. Avatar for Oleg Kiriljuk
    Oleg Kiriljuk March 5th, 2011

    I get to know jqGrid from the article. So thank you very much for it! Since the time I know jqGrid much more and answer many jqGrid on the stackoverflow.com (see http://stackoverflow.com/tags/jqgrid/topusers). I seen again and again that there are the same error in the posted code examples. I find out that the errors originate from your code here. If one search from "jqgrid AND mvc" one find the article on the second place after http://www.trirand.com/blog/?p=639 having no code examples, so many people use the code from the page as the template and duplicate the error.
    So please replace in the code "i = question.Id" to "id = question.Id" (two places). In JSON data the id must be as "id" and not "i". In the current code the "i" will be ignored and jqGrid use 1,2,3... as the id values which is dangerous.
    If would be also nice if you include the comment after "Json(jsonData);" with the text like "// in ASP.NET MVC >=2.0: Json(jsonData, JsonRequestBehavior.AllowGet);". It would be save many time of the MVC beginners.
    It is two the most common problems. One could make many improvements in the code, but there not so important.
    Thanks in advance,
    Oleg Kiriljuk

  117. Avatar for haacked
    haacked March 6th, 2011

    @Oleg Thank you! I've fixed the issues you mentioned. Let me know if you have others.

  118. Avatar for Kim
    Kim March 17th, 2011

    I'm very new to MVC2 and jqGrid.
    I appreciate your article but i'm wondering of how to make it editable and addable. I tried myself but I got the blank dialog for both add and edit dialogs.
    Can you please help provide the example of both the javascript and the code behind for the editurl.
    Thanks.

  119. Avatar for giri
    giri March 23rd, 2011

    In ActionResult Method
    i am assigning the data to a string variable
    and the out i am getting is
    ----------
    "[
    {
    "Allergy": "Chocolate",
    "Severity": "High",
    "Id": 1
    }
    ]"
    -----------
    and this string i am returning to view, in my VIEW i have converted to list like this
    --------------
    @{
    ViewBag.Title = "Index";
    string view = ViewBag.Allergies;
    List<Dictionary<string, string>> obj = new List<Dictionary<string, string>>();
    obj = Json.Decode<List<Dictionary<string, string>>>(view);
    }
    --------------
    using for loop i am binding the data to anchor tag like this
    ------------------
    <ul class="list">
    @foreach (var columnHeader in obj)
    {
    foreach (var columnData in columnHeader.Values)
    { @columnData } <br /> }
    </ul>
    ------------------
    my question is i want to bind that data to grid, i have included the output at the top, output coming from controller is string that i am converting to a list in my view now that list i want to bind in grid

  120. Avatar for oric
    oric March 27th, 2011

    I wrapped the jQuery Grid inside an HTML helper. Take a look at blogs.microsoft.co.il/...

  121. Avatar for Sue
    Sue March 28th, 2011

    Hi I tried implementing this example but i am recieving error on the $.ajax({url:ts.p.url,type:ts.p.mtype,datatype:"json",data: gdata, complete:function(JSON) { addJSONData(eval("("+JSON.responseText+")"),ts.grid.bDiv); if(loadComplete) loadComplete();}});
    I thought this might be because of special characters in one of my columns but does not see to be the isuue on the other hand alerts = context.Alerts.
    OrderBy(sidx + " " + sord).
    Skip(pageIndex * pageSize).
    Take(pageSize);
    the orderby method above does not have an overload that accepts as parameter string only so I am wondering maybe I am not downloading hte right version of the Dynamic version ... any advise is appreciated

  122. Avatar for markp3rry
    markp3rry April 3rd, 2011

    If anyone is interested I have posted a VB.NET example of the first part of this tutorial.
    markp3rry.wordpress.com/...
    Tweet @markp3rry if you want any more help or information.

  123. Avatar for MarkF
    MarkF April 11th, 2011

    This doesn't work with the latest copy of jqGrid, it pops up the following error message:
    *** Microsoft JScript runtime error: '$.jgrid.formatter.integer' is null or not an object
    To fix it you need to specify a locale file before the jqGrid file:
    <script src="../../Scripts/src/i18n/grid.locale-en.js" type="text/javascript"></script>

  124. Avatar for haacked
    haacked April 24th, 2011

    @MarkF I've updated the sample to the latest jQuery and jQGrid.

  125. Avatar for Stirile zilei
    Stirile zilei April 28th, 2011

    This solution isn't work on VS2010 .Net 4.0. I don't know why. When I use debug tool I can see that data is sending into grid. I am running into error when I tried to run the sample project. It says "A project with an output type of class library cannot be started directly.

  126. Avatar for haacked
    haacked April 28th, 2011

    Did you set the Web Project as the Startup project? Do you have ASP.NET MVC 3 installed?

  127. Avatar for Maven
    Maven May 5th, 2011

    First Thanks lot for such a great post, I was finding likewise solution for long for my student project.
    But I M having a problem currently, after implementing all this when M returning Json() then all I get in my browser is few lines of un-rendered plain text (no html) in the resultant, like:
    {"total":-2147483648,"page":null,"records":1,"rows":[{"id":1,"cell":["1","-7","Is this a good question?"]},{"id":2,"cell":["2","15","Is this a blatant ripoff?"]},{"id":3,"cell":["3","23","Why is the sky blue?"]}]}
    Can someone please guide me through this, Thank-you!

  128. Avatar for Gabriel Mare&#241;o
    Gabriel Mare&#241;o May 6th, 2011

    I have read your post about jquery grid. I did the example but I don't have the themes. How can I get it?

  129. Avatar for invitatii nunta
    invitatii nunta May 18th, 2011

    I am still getting the object not supported issue. I have changed the var pathtojsfiles and everytime I run and debug it changes the path back to the original. And also, how can I add the delete/edit links in each row. Do you have the theme css and images files? Thanks.

  130. Avatar for Jason
    Jason May 20th, 2011

    Had the same problem as Maven. Can you answer his question?

  131. Avatar for Poker
    Poker May 23rd, 2011

    We kunnen er nu echt niet meer om heen, mobiel internet gaat het worden. Zeker nu met al dat getwitter (wat ook op de tv een beetje wordt opgeblazen vind ik, bijvoorbeeld al die politieke uitzendingen met

  132. Avatar for Rohit
    Rohit May 31st, 2011

    Its nice but I want to use check box in it to getting checked data how can i use it.

  133. Avatar for Shilpa
    Shilpa July 3rd, 2011

    How to Enable/Disable a column in jqGrid based on a status value (Eg: I should disable a column based on IsActive = True/False for an employee).

  134. Avatar for aay
    aay July 22nd, 2011

    for god sake place working example

  135. Avatar for Apartments Barcelona
    Apartments Barcelona August 8th, 2011

    Thanks for this. I really like what you've posted here and wish you the best of luck with this blog!

  136. Avatar for benefits of dates
    benefits of dates August 10th, 2011

    Hello, Someone said text messaging on your weblog and i also grew to be interested in the topic. I like your internet site that i'm thinking no matter if I can make use of your words inside my operate? Would it be doable? If yes, make sure you speak to with me at night.Many thanks.
    benefits of dates

  137. Avatar for aqeel
    aqeel August 16th, 2011

    when ever i run program it ask me to save file, pls help, if i change content type to test or html its display text in browser and does not show recod in grid hellllllllllllllllllllllppppppppppppp
    almost all day no help

  138. Avatar for Lijun
    Lijun August 29th, 2011

    Hi, thanks for the wonderful post. The code is neat! I am having some problem here and wonder if anyone can help me out. It was fine to display data from a string array, but when I connect to my own database using .NET 4.0 Entity Data Model, and the data I got back has the columns' order messed up (alternate rows), like instead of getting [col1, col2, col3] array back, it got [col3, col2, col1] for alternate rows in the jSONData.
    Any help would be really appreciated!

  139. Avatar for ryan
    ryan October 5th, 2011

    Hi,
    How to validate grid input?
    Ex. when I create a new item with no value.

  140. Avatar for James Magilicutty
    James Magilicutty October 31st, 2011

    Hey there!
    Here's a link to a working vb.net MVC example that uses JSON. It's based on Phil's and a number of other bits here and there but it works!
    Pages and sorts and everything. I tried to include good comments too.
    Hope this helps someone - it took me a long time to get it working.

  141. Avatar for James Magilicutty
    James Magilicutty October 31st, 2011
  142. Avatar for Pranil
    Pranil November 1st, 2011

    If only i stumbled across this website before, i would have saved 4 hours. Very informative :-)

  143. Avatar for Kalimuthu
    Kalimuthu November 14th, 2011

    anybody can help me . I need dropdown list and checkbox controls inside of grid., how can use this grid..plz advice me

  144. Avatar for Webbycartinfo
    Webbycartinfo January 22nd, 2013

    fab example

  145. Avatar for s
    s June 15th, 2013

    good

  146. Avatar for CMerx
    CMerx January 24th, 2014

    There is a jqGrid JSON Serializer that greatly simplifies the task of sending JSON response to jqGrid. It goes under the MIT license and can be found here http://codemerx.com/jqgrid/...

  147. Avatar for Umamaheswararao Dasari
    Umamaheswararao Dasari February 18th, 2014

    Good and simple words.............

  148. Avatar for Hiren Parejiya
    Hiren Parejiya May 30th, 2014

    Awesome post!

  149. Avatar for Akio
    Akio July 1st, 2014

    I found the bug frozencolumns of jqGrid.
    Then reload of frozen multiple columns [<div>] is generated after you have specified the frozen column.
    I have inserted two lines to 4727 lines as a countermeasure.
    if (maxfrozen> = 0 && frozen) {
    . $ ("# gview_" + $ tpid + '. frozen-div') remove (); / / Added this line
    . $ ("# gview_" + $ tpid + '. frozen-bdiv') remove (); / /
    var top = $ tpcaption $ ($ t.grid.cDiv) outerHeight ():?. 0,
    . hth = $ (. ". ui-jqgrid-htable", "# gview_" + $ jgrid.jqID ($ tpid)) height ();
    / / headers
    if ($ t.p.toppager) {

  150. Avatar for Marcos Rodríguez
    Marcos Rodríguez November 6th, 2014

    Thank you so much, I have solved my problem :D

  151. Avatar for Alexandra  Parker
    Alexandra Parker August 1st, 2016

    Can this grid be exported in Excel like in this demo:
    http://demos.shieldui.com/w...

  152. Avatar for Amanda Ayers
    Amanda Ayers September 29th, 2016

    Very, very nice! You can also take a look at this very good example of a grid control: https://demos.shieldui.com/.... I have been using it recently to sort large amounts of data and export them to PDF.

  153. Avatar for TechDoubts
    TechDoubts May 13th, 2017

    This is a nice tutorial, but I think it is old now. I have written much more that includes a new design to jQGrid, checkout http://www.techdoubts.net/2... here.

  154. Avatar for mahdi moghimi
    mahdi moghimi January 10th, 2018

    Hey , your work is very Admirable. Very very thanks. God bless you.