jQuery Grid Plugin - jqGrid

Hi, I'm new to jqGrid and I'm having problems getting JSON data to display in the grid. I suspect it has to do with the data format the grid is expecting based on what I've read about regarding the jsonReader and the default data format.

I know the JSON data is being returned to the client. I checked the response header.

Would someone please help figure out what am I missing? How can I display the data below in the grid? 

Do I have to massage the JSON results to the expected default format? Or can I customize the format to fit the data returned?

Thank You!

Chris 

My server-side sql query looks like this:

SELECT id, name, email, phone, comment FROM test_table ORDER by id

The returned JSON data looks like this:

{ "COLUMNS":["ID","NAME","EMAIL","PHONE","COMMENT"], 

   "DATA":[ [1,"Rick Tester","rick@tester.org","555-666-7777","Test comments."],

                  [5,"Max Headroom","max@headroom.org","555-666-7777","Test comments."],

                 [13,"Jessica Levalore","jlevalore@Levalore.com",555-666-7777,"Test comments."] ]}  

Here's my jqGrid code:

jQuery("#leadlist").jqGrid({

url:'/hub/get-leads',

datatype: 'json',

mtype: 'GET',

colNames:['id', 'name','email','phone','comment'],

colModel :[

{name:'id', index:'id', formatter:'integer', width:55},

{name:'name', index:'name', width:55},

{name:'email', index:'email', width:55},

{name:'phone', index:'phone', width:15, align:'center'},

{name:'comment', index:'comment', width:150, sortable:false}

],

jsonReader : { root: "DATA" },

autoWidth:true,

altRows:true,

pager: '#leadpager',

rowNum:15,

rowList:[15,30,45],

sortname: 'name',

sortorder: 'desc',

viewrecords: true,

caption: 'Leads'

});