How to use subgrid with Jqgrid and 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: