javascript - AJAX JSON data is not display in jqGrid -

i new jqgrid trying show data when click of 1 colmodel @ time need display data in jqgrid received data server , pass function , shown data not display data no error how display in it??

gridland.jqgrid({          datatype:'local',         data: val,           colnames:clnms,         colmodel:collmdls,         rownum:10,         rowlist:[10,20,30],         pager: "land_details_table_pager",         gridview:true,         //rownumbers:true,       //  sortname: 'id',         viewrecords: true,         sortorder: 'asc',         caption:"land detail",         height: '100%',         autowidth:true,         shrinktofit:false,            oncellselect: function(rowid, index, contents, event)          {                   var cm =  gridland.getgridparam('colmodel');              var rowdata = gridland.getrowdata(rowid);              alert("rowdata====>"+json.stringify(rowdata));              var slnno = rowdata['slnno'];               $("#currpattachk").val(rowid);               var district;              var taluk;              var  village;              var applid;               $.each(val,function(k,v){                   district= v.districtcode;                  taluk=v.talukcode;                  village=v.villagecode;                  applid=v.applicationid;            });   if(cm[index].name == "pattano")                {                     alert("here pattano");                         var pattano = rowdata['pattano'];   // perticuler column name of jqgrid want access                    var splitsursuvy=rowdata['survsub'].split("/");                       var arr= {}                   arr.district= district;                   arr.taluk=taluk;                  arr.village=village;                  arr.pattano=pattano                 arr.surveyno=splitsursuvy[0]                   arr.subdivno=splitsursuvy[1];                 arr.applicationid=applid;                   var landarrchk=[];                 landarrchk.length=0;                var inputval=  json.stringify(arr);                    //alert("in fetch owners");                 //alert("inputval====>"+json.stringify(arr));                 //alert("inputval===> "+inputval);                 //var hash = cal_hmac(xx);                 //var m = "";             //  document.getelementbyid('imgdiv').style.display = 'block';                  $.ajax({                         url: urlservice + servicename + '/getsublanddetails?jsoncallback=?',                         headers:                         {                             "emp_value": ses,                             "signature": hash,                             "roleid": roleid,                             "timestamp": t,                         },                         type: 'post',                         datatype: 'jsonp',                         data: inputval.tostring(),                         // jsonpcallback:"aaa",                         contenttype: "application/json",                         success: function(data)                         {                               var s_no=1;                             content="";                              var datachk;                              /*var survsub;                             =v.surveynewno+"/"+v.subdivnewno;*/                              $.each(data, function(k, v)                                     {                                 $.each(v.ownerdata, function(k, v1)                                         {                                         datachk+='<div style="display:none"  id="currpatta'+s_no+'" >'+ json.stringify(v1) + '</div>'                                      $("#landnewdetailchk").html(datachk);                                      v1.survsub=v1.surveynewno+"/"+v1.subdivnewno;                                     v1.slnno=s_no;                                     v1.select='<input type="radio" name="subradio" id="subradio" onclick="getcurrpatta(' + s_no + ')" />';                                      getsublanddetails(v1);                                           });                                 s_no++;                                     });                          },                         error: function(jqxhr, exception)                         {                             // alert("error:"+json.stringify(jqxhr));                             alert("error occured");                             document.getelementbyid('imgdiv').style.display = 'none';                         }                         });                  } }); } 

second grid:

function getsublanddetails(arr) {         alert("landdetailgrid======="+json.stringify(arr));       clnms=['s.no','surveyno/subdivisionno','excet hect','excet hect','select subdivision'];      collmdls=[                  {                     name:'slnno',                     index:'slnno',                     classes:'slnno',                     width:150,                     align:'center',                     sorttype: 'string'                 },                  {                     name:'survsub',                     index:'survsub',                     classes:'survsub',                     value:20,                     width:150,                     align:'center'                    //    oncellselect:ff()                        },                  {                     name:'exthect',                     index:'exthect',                     classes:'exthect',                     width:150,                     align:'center',                     sorttype: 'string'                  },                     {                     name:'extarea',                     index:'extarea',                     classes:'extarea',                     width:150,                     align:'center',                     sorttype: 'string'                   },                    {                         name:'select',                         index:'select',                         classes:'select',                         width:150,                         align:'center',                         sorttype: 'string'                       }, ]; $("#landdetailnew").jqgrid({             datatype:'local',         data: arr,           colnames:clnms,         colmodel:collmdls,         rownum:10,         rowlist:[10,20,30],         pager: "landnewdetail",         gridview:true,          //rownumbers:true,       //  sortname: 'id',         viewrecords: true,         sortorder: 'asc',         caption:"new land detail",         height: '100%',         autowidth:true,         shrinktofit:false });    } 

json data are:

landdetailgrid======={"villagecode":"057","district_code":"16","extarea":12,"talukcode":"03","subdivnewno":"2a","exthect":0,"curpatta":1840,"surveynewno":"167   ","survsub":"167   /2a","slnno":1,"select":"<input type=\"radio\" name=\"subradio\" id=\"subradio\" onclick=\"getcurrpatta(1)\" />"}  landdetailgrid======={"villagecode":"057","district_code":"16","extarea":9,"talukcode":"03","subdivnewno":"2b","exthect":0,"curpatta":1841,"surveynewno":"167   ","survsub":"167   /2b","slnno":1,"select":"<input type=\"radio\" name=\"subradio\" id=\"subradio\" onclick=\"getcurrpatta(1)\" />"} 

i see problems in code posted

1. the data displays after "landdetailgrid=======" not array of items. can't display 1 item of data. data should have outer `[].
2. it seems tried call getsublanddetails function more once. first call $("#landdetailnew").jqgrid({...}); convert empty table <table id="landdetailnew"></table> in relative complex structure of divs , tables. can't more once. 1 can setting of new value of data option , reloading of jqgrid data using $("#landdetailnew").trigger("reloadgrid");. alternatively 1 can use $("#landdetailnew").jqgrid("gridunload"); destroy grid before creating grid on same place.
3. the input data column 'select' seems have problems. it's ok have one element on page in form, if grid more 1 row have id duplicates because elements of column have same id="subradio" attribute (<input type="radio" name="subradio" id="subradio" onclick="getcurrpatta(1)" />).
4. the general code of oncellselect callback in main grid seems complex , can reduced in multiple times. recommend use datatype: "jsonp", loadonce: true in second grid. can use ajaxgridoptions: {headers: ...} option set additional http headers of request , can use jsonreader: {root: "ownerdata"} inform part of server response should used jqgrid data.
5. you can remove onclick="getcurrpatta(1)" part use in select column. can use custom formatter place <input type="radio" name="subradio"/> data in column. 1 can use beforeselectrow or oncellselect process onclick event in radio button column.