How to use subgrid with Jqgrid and JSON? - json

Question

I'm a jqrid newbie. My problem is how to make it work using subgrid? This is the js file :
var url = $.url(window.location.href.replace("#",""));
var page = url.param("page");
var sortname = url.param("sortname");
var sortorder = url.param("sortorder");
jQuery("#list2").jqGrid({
url:'/taskuri/json/',
datatype: "json",
colNames:['Pri','Proiect','','Task', '', 'Responsabil','Alocator', 'Alocat', 'Deadline','Estimat','Lucrat',''],
colModel:[
{name:'priority',index:'priority', width:'3%', editable: true, editoptions:{size:"1",maxlength:"1"}},
{name:'project',index:'project', width:'7%'},
{name:'finished',index:'finished', width:'2%'},
{name:'section',index:'section', width:'38%'},
{name:'projectid',index:'projectid',hidden:true},
{name:'user',index:'user', width:'7%', editable: true,edittype:'select',editoptions:{value:getUsers }},
{name:'assignerid',index:'assignerid', width:'7%'},
{name:'created',index:'created', width:'6%', editable:true},
{name:'deadline',index:'deadline', width:'6%', editable:true},
{name:'estimated',index:'estimated', width:'4%', editable:true, align:'right'},
{name:'worked',index:'worked', width:'5%',align:'right', align:'right'},
{name:'remove',index:'remove', width:'3%', sortable:false}
],
rowNum:100,
sortname: (sortname != null) ? sortname : 'taskid',
viewrecords: true,
sortorder: (sortorder!=null) ? sortorder : "desc",
caption:"",
autowidth: true,
shrinkToFit: true,
height:'auto',
//width: '100%',
scroll:false,
scrollOffset:0,
//height: '100%',
altRows: true,
altClass: '',
page: (page!=null)? page: 1,
footerrow : true,
userDataOnFooter: true,
subGrid : true,
subGridUrl: '/taskuri/subGrid/',
subGridModel: [{ name : ['Test1','Test2'],width : [55,200,80,80,80] } ],
loadComplete:function(request){
$('#totalRows').html(request.total + " rezultate");
$("[aria-describedby='list2_section']", this).contextMenu('myMenu1',{
onContextMenu: function(e) {
var rowId = $(e.target).closest("tr.jqgrow").attr("id");
var projectName = $('#list2').jqGrid('getCell',rowId,'project');
var taskName = $('#list2').jqGrid('getCell',rowId,'section');
var regex = /<a.+>(.+)\<\/a>/;
var result = taskName.match(regex)[1];
//if($(e.target).closest('a').attr("class"))
//{
$("#addSubTask").click(function(){
$('#proiectName').val(projectName);
$('#taskName').val(result);
$("#adsubtaskdialog").dialog({show:"slow", title: "Adaugare SubTask",
resizable: true, width:337
});
});
//$("#addSubTask").html('<a href="/timp/editSubtask/?action=start&projectName='+projectName+'&taskName='+result+'" class="addTime" >Adauga SubTask</a>');
$("#send").html('<a onclick="send_email('+rowId+')">Trimite email de reamintire</a>');
return true;
//}
//else
// return false;
}
});
$("#paging").html(request.userdata.pager);
$(".numb").click(function() {
$("#list2").trigger("reloadGrid", [{page:$(this).text()}]);
});
doPagination();
showConfirm();
formatUrl();
setBackUrl();
$("#empty").hide();
if(request.total == 0)
$("#empty").show();
registerOverlay();
//footer row hack
$(".ui-jqgrid-sdiv").width('auto');
$(".ui-jqgrid-ftable").css("margin-top",0);
},
..........
where taskuri/subGrid/ (taskuri is a controller) and subGrid(is a function). Im using Codeigniter. The function has the following code :
$this->load->library('JSON');
$examp = $_GET["q"]; //query number
$id = $_GET['id']; // connect to the database
$query = "SELECT taskid,name, deadline
FROM tasks
WHERE taskid='8516'
ORDER BY taskid";
$result = mysql_query($query);
$i =0 ;
while($row = mysql_fetch_array($result)) {
$response->rows[$i]=$row;
$i++;
}
echo json_encode($response);
Im totally confused. Can anyone help me with this ? This is a picture how does it look like: