Saturday, September 21, 2013

Get Column Name and Cell Contents of jqGrid on Double Click

I recently discovered the wonderful world of jqGrid, and what a wonderful world it is.  On several applications now, I’ve taken to implementing it in some sort of fashion, to either sort data or respond to various events to dynamically load data on my applications.  Today I had an issue, I needed to get the cell value and column label for the selected cell when a user double clicked in a jqGrid row.  onSelectRow makes this pretty trivial, but I didn’t want to respond to a single click, only a double click.  All the events and data required was built into jqGrid, I just couldn’t find much of anything on the web.  Hence, I figured it out, and thought I would offer my code to those who may be in need.

Instead of using onSelectRow and determining if it was a double click, etc, just use the onDblClickRow function, which offers the parameters rowid, iRow, iCol and e (for event).  Using this data, we can still access various arrays for your jqGrid and get at the appropriate cell value…

   ondblClickRow: function(rowid, iRow, iCol, e){
      var colNames = $(this).jqGrid(“getGridParam”, “colNames”);
      var colName = colNames[iCol];
      var colVal = $(this).jqGrid(“getCell”, rowid, iCol);

And that’s all there is to it!

Friday, September 13, 2013

Creating a jqGrid with ASP.NET Web Forms and a JSON Web Service

I'm adding alot of twitter bootstrap, jquery and jqueryui components to a new project I'm working on, and frankly I'm pretty excited about how the UI is coming along.  At one point, I had the idea to use a jqGrid with my ASP.NET Web Forms application.  After some frustration, I eventually started to read various comments on stackoverflow and on other blogs, reading similar to:

  • Why cant I use jqGrid and ASP.NET?
  • jqGrid and ASP.NET... this is becoming mind numbingly painful
  • ASP.NET web service with jqGrid won't load, but no errors, whats the deal

My emotions were the same as being on the turnpike and being told "no rest stop for 50 miles" and then realizing your low on gas.  For anyone who has tried to use jqGrid with an ASP.NET web service, I'm sure you know what I'm talking about here, using jqGrid just seems to be very, very finicky.  Fortunately, many have prevailed, including me.  I wanted to give an honest to goodness example of using jqGrid and an ASP.NET web service (not using an HTTP Handler), since this was so painful for some reason.

High Level, how this works...

This works like you'd hope it would, set up some service to accept a request for data, and return that data request with JSON to the calling object.  Just 2 components to show here, a web service and a jqGrid calling the service.  Strap in..

ASP.NET JSON Web Service

Below is my example of the webservice object you need.  jqGrid is expecting something to come back with "total", "records", "page" and "rows", where rows has your items of data.  Here we create a response with these appropriate properties:


First off, before you even try to do anything else with your jqGrid, you need 3 things to make this thing work properly.  You may think you read their documentation and followed it to the letter of the law... but you're wrong.  Make sure you link to..

  1. A locale file (example: grid.locale-en.js)
  2. A jquery.jqGrid.js file
  3. A ui.jqgrid.css file
  4. (Bonus!) - Make sure you also link to jquery... just incase youre new to this stuff... and if so, place the jquery script reference first!

What's going on with that script?  It has all of the subtle nuances figured out for you, to prevent you from getting the same headaches many others have griped about.  Here's some of the main talking points:

  • Datatype is "json", since that's what we're expecting
  • In our example, no data is required for our service, so just send "{}" for the data parameter
  • ajaxGridOptions and contentType specifies application/json as the data transfer type, ensuring all data is sent as JSON and not XML
  • the serializeGridData function takes any data being posted to the web service and sends it as JSON, not XML.  I know what you're thinking, "I'm not sending any data I'll just delete this".. DONT.  Some basic data is always posted to the service when loading the grid, without this code, XML is sent instead of JSON, causing the jqGrid to freak out. 
  • jsonReader - this option contains all the little details in loading your grid with your data, setting your paging, etc.  Notice the "d." in the values, that's not a type-o, Microsoft and other services add this for security reasons (  Otherwise, these values just match to the properties we created in our webservice class