Ajax Data Result to jqgrid display - jqgrid

Question

I have this result from AJAX call I want to pass it to jqgrid. The format is exactly the same normal jqgrid call. I dont know why its not working, any help is greatly appreciated.
{"page":null,"total":2,"records":"16","rows":[{"id":"9910003","cell":["9910003","DEMO3","Test3","Sat,Sun","08:00:00","17:00:00","17","0"]},{"id":"9910004","cell":["9910004","DEMO4","Test4","Sat,Sun","08:00:00","17:00:00","19","0"]},{"id":"9910005","cell":["9910005","DEMO5","Test5","Sat,Sun","08:00:00","17:00:00","17","0"]},{"id":"9910006","cell":["9910006","DEMO6","Test6","Sat,Sun","08:00:00","17:00:00","17","0"]},{"id":"9910007","cell":["9910007","DEMO7","Test7","Sat,Sun","08:00:00","17:00:00","14","0"]},{"id":"9910008","cell":["9910008","DEMO8","Test8","Sat,Sun","21:00:00","06:00:00","19","0"]},{"id":"9910009","cell":["9910009","DEMO9","Test9","Sat,Sun","21:00:00","06:00:00","14","0"]},{"id":"9910010","cell":["9910010","DEMO10","Test10","Sat,Sun","21:00:00","06:00:00","14","0"]},{"id":"9910011","cell":["9910011","DEMO11","Test11","Sat,Sun","21:00:00","06:00:00","14","0"]},{"id":"9910012","cell":["9910012","DEMO12","Test12","Sat,Sun","21:00:00","06:00:00","17","0"]},{"id":"9910013","cell":["9910013","DEMO13","Test13","Sat,Sun","21:00:00","06:00:00","16","0"]},{"id":"9910014","cell":["9910014","DEMO14","Test14","Sat,Sun","21:00:00","06:00:00","14","0"]},{"id":"9910015","cell":["9910015","DEMO15","Test15","Sat,Sun","21:00:00","06:00:00","14","0"]},{"id":"9910016","cell":["9910016","DEMO16","Test16","Sat,Sun","21:00:00","06:00:00","14","0"]}]}
Below is my full code:
function report_grid() {
$.ajax({
type: "POST",
url: "filter_option.php?action=filter",
data: $('#form1').serialize(),
success: function(rdata) {
jQuery("#report-grid").jqGrid({
data: rdata,
datatype: "local",
colNames:['Emp ID','firstName', 'surName', 'restDay','shift_In','shift_Out','late','undertime'],
colModel:[
{name:'emp_id',index:'emp_id', width:55},
{name:'firstname',index:'firstname', width:90},
{name:'surname',index:'surname', width:100},
{name:'restday',index:'restday', width:80, align:"right"},
{name:'shift_in',index:'shift_in', width:80, align:"right"},
{name:'shift_out',index:'shift_out', width:80,align:"right"},
{name:'late',index:'late', width:150, sortable:false},
{name:'ut',index:'ut', width:150, sortable:false},
],
height: 'auto',
width: 'auto',
rowNum:10,
rowList:[10,15,20,30,50],
pager: '#report-pager',
sortname: 'emp_id',
viewrecords: true,
sortorder: "desc",
caption:"Timesheet Summary"
});
jQuery("#report-grid").jqGrid('navGrid','#report-pager',{edit:false,add:false,del:false});
}
})
}
I tried below but no success, I think I'm missing something
data:rdata.rows
datatype:"local" // shows only the id but with correct number of records
data:rdata.rows
datatype: "json" // shows nothing at all.

Answer 1

Got it now, my json format is incorrect, I should refer to data array in demo page.