jQuery Grid With ASP.NET MVC

26/01/2011

Tim Davis Just a short and quick post for those out there that follow Phil Haack and his awesome blog – [if you don't - become a fan if you're using ASP.NET MVC - great stuff from the lead architect]. Anyway, Phil posted an article a while ago on using jqGrid with ASP.NET MVC and the solution simply hasn’t been updated to the latest libraries and has required a few updates here and there in the code.

I’ve updated the solution and made it available for download via this link. Click to download it and you’ll get:

  1. jqGrid 3.8.2
  2. .NET 4.0 Updates
  3. VS2010
  4. jQuery 1.4.4
  5. jQuery UI 1.8.7

Let me know if there are any problems with it otherwise – enjoy!

tim@timdavis.com.au
  • http://twitter.com/nicholaspei NicolasPei

    Thanks for the sample code. Can I edit the cell in jqGrid?

  • http://www.timdavis.com.au Tim Davis

    Hey Nic,

    Think you should review http://www.trirand.com/blog/jqgrid/jqgrid.html – to see all the options available on editing. Checkout “Row Editing” under the Basic Example.

    :)

  • Matthieu Penant

    using id as an identifier for the JSON data sent by the controller instead of i would make it easier to use the proper ids in the javascript if needed (multi selection for example).

  • http://www.facebook.com/people/Gediminas-Bukauskas/100002364549356 Gediminas Bukauskas

    JSON data format is changed now:
      1) Property names starts with capital letter: Total, Page, Records, UserData, Rows
      2) You have to create anonymous type with properties that you were created in colModel (use the same names that you wrote in attribute name). For example, my colModel is:
               colModel: [{ name: 'UserName', index: 'UserName', width: 120, align: 'left' },                           { name: 'CreationDate', index: 'CreationDate', width: 140, align: 'left' },                           { name: 'Email', index: 'Email', width: 200, align: 'left' },                           { name: 'IsApproved', index: 'IsApproved', width: 90, align: 'center' },                           { name: 'IsLockedOut', index: 'IsLockedOut', width: 80, align: 'center' },                           { name: 'IsOnline', index: 'IsOnline', width: 80, align: 'center' },                           { name: 'LastLoginDate', index: 'LastLoginDate', width: 140, align: 'left' }                          ],
    On server side I had to create this object:
                var jsonData = new            {                Total = totalPages,                Page = page,                Records = totalRecords,                Rows = users.Select(usr => new                     {                        Id = usr.ProviderUserKey.ToString(),                        UserName = usr.UserName.ToString(),                         CreationDate = usr.CreationDate.ToString(“g”),                         Email = usr.Email,                        IsApproved = usr.IsApproved ? “+” : ” “,                         IsLockedOut = usr.IsLockedOut ? “+” : ” “,                        IsOnline = usr.IsOnline ? “+” : ” “,                         LastLoginDate = usr.LastLoginDate.ToString(“g”)                    }).ToArray()            };

  • http://www.facebook.com/people/Gediminas-Bukauskas/100002364549356 Gediminas Bukauskas

    Sorry for unclear sample: editor mangled the text. Copy both code bloks into any text editor and reformat them, please.

Mobile Analytics