Search code examples
jsonjqgridjquery-pagination

jqGrid json data grid not displayed


I have a jqGrid with below definintion

function loadSearchGrid(jsonData){
jQuery("#searchGrid").jqGrid({
        datatype: 'jsonstring',
        width: w ,
        datastr: jsonData,      
        colNames:['Hidden Location ID','Hidden Contact ID','Hidden Customer ID','ID','Company','Service Address', 'State', 'LCON First','LCON Last','LCON Phone','LCON Email','LCON External ID','Letters','Notes','Attachments'],
        colModel:[
            {name: "hiddenLocationID",index:'hiddenLocationID', sortable:false, search:false, width:110, hidden:true},
            {name: "hiddenContactID",index:'hiddenContactID', sortable:false, search:false, width:110, hidden:true},
            {name: "hiddenCustomerID",index:'hiddenCustomerID', sortable:false, search:false, width:110, hidden:true},
            {name: "ID",index:'ID', sortable:true, search:false, width:10},
            {name:'company',index:'company', width:40,search:true, sorttype:"int"},
            {name:'serviceAddress',index:'serviceAddress',search:true, width:40},
            {name:'state',index:'state',search:true, width:40},
            {name:'lconFirst',index:'lconFirst',search:true, width:40, align:"center"},
            {name:'lconLast',index:'lconLast',search:true, width:40, align:"center"},       
            {name:'lconPhone',index:'lconPhone',search:true, width:40,align:"center"},
            {name:'lconEmail',index:'lconEmail',search:true, width:40,align:"center",formatter:emailFormatter},
            {name:'lconExternalId',index:'lconExternalId',search:true, width:40,align:"center",formatter:lconExternalIdFormatter },
            {name:'letters',index:'letters', width:40,search:false,align:"center",formatter:letterFormatter},
            {name:'notes',index:'notes', width:40,search:false,align:"center",formatter:noteFormatter},     
            {name:'attachments',index:'attachments', width:40,search:false, sortable:false,formatter:attachmentFormatter}       
        ],
        loadComplete: function () 
        {     
           var totalRecords = jQuery("#searchGrid").getGridParam("records");       
           /*if (totalRecords==0)
           {
                $("#searchDiv").addClass("tblSection marT10 nodataFound");
                $("#searchDiv").html("No Results were found matching your criteria");
           }*/
           //$('#searchGrid').jqGrid('filterToolbar',{searchOnEnter:false , defaultSearch:"cn"});

        },
        onSelectRow: function(rowid, iRow, iCol, e) 
        {
            var company = $('#searchGrid').jqGrid('getCell', rowid, 'company');
            var serviceAddress = $('#searchGrid').jqGrid('getCell', rowid, 'serviceAddress');
            var locationId = $('#searchGrid').jqGrid('getCell', rowid, 'hiddenLocationID');
            var contactId = $('#searchGrid').jqGrid('getCell', rowid, 'hiddenContactID');
            var customerId = $('#searchGrid').jqGrid('getCell', rowid, 'hiddenCustomerID');
            $('#customerId').val(customerId);
            $('#contactId').val(contactId);
            $('#locationId').val(locationId);

            //disbaled top buttons
            $("#exportToExcel").removeAttr("disabled");
            $("#editContact").removeAttr("disabled");
            $("#deleteContact").removeAttr("disabled");
            $("#newLcon").removeAttr("disabled");
            $("#newLocation").removeAttr("disabled");

        },
        rowNum:10,
        rowList:[10,20,30],
        pager: '#searchPager',
        paging:true,
        height: 400,
        sortname: 'company',
        viewrecords: true,
        sortorder: "desc",
        gridview: true,
        jsonReader : {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",  
                id:"ID",                
                repeatitems: false                         
        },
        loadonce: false,
        ignoreCase: true        
    });
    console.log("msg is ", jsonData);
    $('#searchGrid').jqGrid('filterToolbar',{searchOnEnter:false , defaultSearch:"cn"});}

I get the json data in the following format from Struts2 Action:

Also my jsonData is as below

 {"total":"18","page":"1","lastRecord":"18","cspUserReqFormUrl":"http://ebiz.sbc.com/cpct/cpct_user_request_form.cfm","records":"18","popCount":"5","rows":[{"lconEmail":"[email protected]","hiddenCustomerID":"119289","state":"Texas","lconPhone":"7133868166","lconLast":"Rapp","hiddenContactID":"95696","lconExternalId":"[email protected]|Remove","hiddenLocationID":"97459","company":"AT T","ID":"1","attachments":"0.0","lconFirst":"Loren","notes":"1.0","letters":"0.0","serviceAddress":"11830 WEBB CHAPEL RD, DALLAS, Texas,75234"},{"lconEmail":"[email protected]","hiddenCustomerID":"37302","state":"Texas","lconPhone":"9727151699","lconLast":"FLOYD","hiddenContactID":"62753","lconExternalId":"|Add","hiddenLocationID":"63956","company":"Prudential","ID":"2","attachments":"0.0","lconFirst":"MARK","notes":"1.0","letters":"0.0","serviceAddress":"5001 SPRING VALLEY RD, FARMERS BRANCH, Texas,75244"},{"lconEmail":"[email protected]","hiddenCustomerID":"111313","state":"Texas","lconPhone":"9724372888","lconLast":"SAVARIAN","hiddenContactID":"85208","lconExternalId":"|Add","hiddenLocationID":"86708","company":"ATX-First Community Bank N.A.","ID":"3","attachments":"0.0","lconFirst":"SHELLY","notes":"1.0","letters":"0.0","serviceAddress":"1755 N. COLLINS BLVD, RICHARDSON, Texas,75080"},{"lconEmail":"[email protected]","hiddenCustomerID":"111711","state":"Texas","lconPhone":"2672628167","lconLast":"COREY","hiddenContactID":"82922","lconExternalId":"|Add","hiddenLocationID":"84302","company":"AT&T-VIEWPOINT BANK","ID":"4","attachments":"0.0","lconFirst":"JAIME","notes":"1.0","letters":"0.0","serviceAddress":"1001 E. CAMPBELL RD, RICHARDSON, Texas,75081"},{"lconEmail":"[email protected]","hiddenCustomerID":"11025","state":"Texas","lconPhone":"8475079311","lconLast":"CALLAGHAN","hiddenContactID":"63333","lconExternalId":"|Add","hiddenLocationID":"64534","company":"Apple","ID":"5","attachments":"0.0","lconFirst":"BILL","notes":"1.0","letters":"0.0","serviceAddress":"8787 N. CENTRAL EXPWY, DALLAS, Texas,75225"},{"lconEmail":"[email protected]","hiddenCustomerID":"111290","state":"Texas","lconPhone":"2147018465","lconLast":"KIM","hiddenContactID":"82552","lconExternalId":"|Add","hiddenLocationID":"83932","company":"QCC DBA CENTURYLINK QCC-SAMSUNG SDS AMERICA INC","ID":"6","attachments":"0.0","lconFirst":"TONY","notes":"1.0","letters":"0.0","serviceAddress":"1301 E LOOKOUT DR, RICHARDSON, Texas,75082"},{"lconEmail":"[email protected]","hiddenCustomerID":"113889","state":"Texas","lconPhone":"2142779863","lconLast":"DAO","hiddenContactID":"85110","lconExternalId":"|Add","hiddenLocationID":"86594","company":"ATX-VIETFACE TV HOUSTON","ID":"7","attachments":"0.0","lconFirst":"HUNG","notes":"1.0","letters":"0.0","serviceAddress":"1301 E. ARAPAHO RD, RICHARDSON, Texas,75081"},{"lconEmail":"[email protected]","hiddenCustomerID":"108914","state":"Texas","lconPhone":"9725810403","lconLast":"REAVES","hiddenContactID":"80035","lconExternalId":"|Add","hiddenLocationID":"81398","company":"QCC DBA CENTURYLINK QCC-PILGRIMS PRIDE","ID":"8","attachments":"0.0","lconFirst":"STEPHAN","notes":"1.0","letters":"0.0","serviceAddress":"1780 JAY ELL DR, RICHARDSON, Texas,75081"},{"lconEmail":"[email protected]","hiddenCustomerID":"91749","state":"Texas","lconPhone":"2543156520","lconLast":"BLACK","hiddenContactID":"62652","lconExternalId":"|Add","hiddenLocationID":"63853","company":"SMITHFIELD","ID":"9","attachments":"0.0","lconFirst":"JASON","notes":"1.0","letters":"0.0","serviceAddress":"17201 WATERVIEW PKWY, DALLAS, Texas,75252"},{"lconEmail":"[email protected]","hiddenCustomerID":"103403","state":"Texas","lconPhone":"9726640727","lconLast":"HAWORTH","hiddenContactID":"74404","lconExternalId":"|Add","hiddenLocationID":"75724","company":"ATX-AWARD SOLUTIONS INC","ID":"10","attachments":"0.0","lconFirst":"BOB","notes":"1.0","letters":"0.0","serviceAddress":"2100 LAKESIDE BLVD, RICHARDSON, Texas,75082"},{"lconEmail":"[email protected]","hiddenCustomerID":"115783","state":"Texas","lconPhone":"9727293352","lconLast":"SELLERS","hiddenContactID":"86985","lconExternalId":"|Add","hiddenLocationID":"88505","company":"QCC DBA CENTURYLINK QCC-WAL MART","ID":"11","attachments":"0.0","lconFirst":"GLEN","notes":"1.0","letters":"0.0","serviceAddress":"400 INTERNATIONAL PKWY, RICHARDSON, Texas,75081"},{"lconEmail":"[email protected]","hiddenCustomerID":"21501","state":"Texas","lconPhone":"9727929393","lconLast":"MARTINEZ","hiddenContactID":"86997","lconExternalId":"|Add","hiddenLocationID":"88518","company":"ATX-HILTON","ID":"12","attachments":"0.0","lconFirst":"TERESA","notes":"1.0","letters":"0.0","serviceAddress":"1001 W PRESIDENT GEORGE BUSH HWY, RICHARDSON, Texas,75080"},{"lconEmail":"[email protected]","hiddenCustomerID":"44762","state":"New 

But my grid is not loaded with data. I get a blank grid with only headers. Can anyone guide me through it. I have searched other questions. And tried all that mentioned in those questions(or maybe I have missed something major).

Also i have to implement server side paging. So using jsonString as datatype wont help I guess. As it then acts as local after loading. Correct me if I am wrong.

Any guidance for writing the java paging implementation would also help.


Solution

  • Instead of using datatype: 'jsonstring' use datatype: 'json',