jqGrid does not show rows

Question

I am trying to display the rows in jqGrid (4.3.2)and havn't got success yet. My webservice response is:

{"d":
{"__type":"JSONResponse:pe",
 "ActionType":null,
 "JSONData":"
            {\"total\":1,
             \"page\":1,
             \"records\":5,
             \"rows\":[
                       {\"invid\":1,\"cell\":[{\"invid\":1,\"amount\":500,\"tax\":65,\"total\":565,\"note\":\"myNote 0\"}]},
                       {\"invid\":2,\"cell\":[{\"invid\":2,\"amount\":510,\"tax\":75,\"total\":585,\"note\":\"myNote 1\"}]},
                       {\"invid\":3,\"cell\":[{\"invid\":3,\"amount\":520,\"tax\":85,\"total\":605,\"note\":\"myNote 2\"}]},
                       {\"invid\":4,\"cell\":[{\"invid\":4,\"amount\":530,\"tax\":95,\"total\":625,\"note\":\"myNote 3\"}]},
                       {\"invid\":5,\"cell\":[{\"invid\":5,\"amount\":540,\"tax\":105,\"total\":645,\"note\":\"myNote 4\"}]}
                      ]
            }",
 "Status":false
}

} <- (assume this curly braces in above code)

My Grid Config look like this:-

<script type="text/javascript">
    $(document).ready(function () {

        gridConfig();

    });

    function gridConfig() {
        var request = JSON.stringify(requestData());
        var jsonResponse;

        $("#list").jqGrid({
            url: '/ScriptServices/JsonService.svc/Process',
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            datatype: 'json',
            postData: { request: function () { return request; } },
            mtype: 'GET',
            colNames: ['Inv No', 'Amount', 'Tax', 'Total', 'Notes'],
            colModel: [
                    { name: 'invid', index: 'invid', width: 55 },
                    { name: 'amount', index: 'amount', width: 80, align: 'right' },
                    { name: 'tax', index: 'tax', width: 80, align: 'right' },
                    { name: 'total', index: 'total', width: 80, align: 'right' },
                    { name: 'note', index: 'note', width: 150, sortable: false }
                  ],
            pager: $('#pager'),
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: 'invid',
            sortorder: 'desc',
            viewrecords: true,
            jsonReader: {
                root: "d.JSONData.rows",
                page: "d.JSONData.page",
                total: "d.JSONData.total",
                records: "d.JSONData.records",
                cell: "cell",
                id:0
            },
            caption: 'My first grid'
        });

    };

    function requestData() {
        var request;
        request = {
            ActionType: 'GET_GRID_DATA',
            RequestJSONData: '{ }'
        };
        return request;
    }

</script>

I am not able to find the issue. Is any other formatting needed. Help please..

Update1:

Now my data is coming in proper json format after Oleg suggestion, but because of __type extra field in my json data, its not rendering correctly.

Modified json data looks like:-

{
"d":
    {"__type":"JSONResponse:pe",
     "ActionType":"GRID_RESP",
     "JSONData":
                {"__type":"JQGridJSONReader:pe",
                "total":1,
                "page":1,
                "records":5,
                "rows":[
                        {"__type":"InvoiceGrid:pe",
                        "invid":1,
                        "cell":[{"__type":"JqGridCell:pe","invid":1,"amount":500,"tax":65,"total":565,"note":"myNote 0"}]},
                        .... and More Rows
                        ]
                },
     "Status":true
}

} <- (assume this curly braces in above code)

I have checked this link and implemented the default constructor suggestion, protected internal is not possible in my case.

My Service config look like this:

<system.serviceModel>
    <services>
        <service name="JsonService" behaviorConfiguration="JsonServiceAspNetAjaxBehavior">
            <endpoint address="" behaviorConfiguration="JsonServiceEndPointBehavior"
                binding="webHttpBinding" contract="JsonService" />
        </service>
    </services>
    <behaviors>
        <endpointBehaviors>
            <behavior name="JsonServiceEndPointBehavior">
                <enableWebScript/>
              <dataContractSerializer ignoreExtensionDataObject="true" />
            </behavior>
        </endpointBehaviors>
        <serviceBehaviors>
            <behavior name="JsonServiceAspNetAjaxBehavior">
                <serviceMetadata httpGetEnabled="true"/>
                <serviceDebug includeExceptionDetailInFaults="true" />
            </behavior>
        </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
        multipleSiteBindingsEnabled="true" />
</system.serviceModel>

If I apply <webHttp/> to endpointBehaviors I get "Variables for UriTemplate query values must have types that can be converted by 'QueryStringConverter'" error.

My WebService look like this:-

[ServiceContract(Namespace = "http://www.abhishek.com/portal/json")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class JsonService
{
    [OperationContract]
    [WebInvoke(Method = "GET", RequestFormat = WebMessageFormat.Json,
        ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]
    [GenerateScriptType(typeof(JsonService), ScriptTypeId = "JsonService1")]
    public PresentationEntities.JSONResponse Process(PresentationEntities.JSONRequest request)
    {
        JSONResponse response;

        try
        {
            if (request == null)
            {
                throw new ArgumentNullException("request", string.Format(ExceptionHelper.ARG_NULL_EXP_MSG, "JSONManager"));
            }
            else
            {
                JQGridTransalator gridtransalator = new JQGridTransalator();
                response = gridtransalator.JQGridToJSONResponse(); // fill response.JSONData with JQGridJSONReader
            }
        }
        catch (Exception)
        {
            throw;
        }

        return response;
    }}

JQGridJSONReader look like this:-

[DataContract(Name = "JQGridJSONReader", Namespace = "pe")]
public class JQGridJSONReader
{
    public JQGridJSONReader()
    {

    }

    [DataMember(Name = "total", Order = 1)]
    public int Total { get; set; }

    [DataMember(Name = "page", Order = 2)]
    public int Page { get; set; }

    [DataMember(Name = "records", Order = 3)]
    public int Records { get; set; }

    [DataMember(Name = "rows", Order = 4)]
    public List<InvoiceGrid> Rows { get; set; }
}

Any suggestion to remove __type from the json data.

Update2:

Updating the code so that I can answer my question more clearly

[DataContract(Name = "InvoiceGrid", Namespace = "pe")]
public class InvoiceGrid
{
    [DataMember(Name = "cell", Order = 2)]
    public List<JqGridCell> Cell { get; set; }
}

[DataContract(Name = "JqGridCell", Namespace = "pe")]
public class JqGridCell
{
    [DataMember(Name = "invid", Order = 1)]
    public int Invid { get; set; }

    [DataMember(Name = "invdate", Order = 2)]
    public DateTime InvDate { get; set; }

    [DataMember(Name = "amount", Order = 3)]
    public double Amount { get; set; }

    [DataMember(Name = "tax", Order = 4)]
    public double Tax { get; set; }

    [DataMember(Name = "total", Order = 5)]
    public double Total { get; set; }

    [DataMember(Name = "note", Order = 6)]
    public string Note { get; set; }
}

Answer 1

Your error is that you serialize object with data d.JSONData from object to JSON twice. Probably you used some JSON serialization manually instead of usage object and allow .NET to serialize the data itself.

How you can see the data like d.JSONData.rows can't be accessed because d.JSONData is string instead of object having rows property.

Answer 2

First mistake corrected:- As suggested by @Oleg I converted JSONData (was in string format) to json object. This was due to JSON serialization used before sending the data.

Second mistake corrected:-

My cell type was like this: List<GridData> and GridData had the cell content(which is complex type i.e. GridData). So I was getting this

"cell":[{"__type":"JqGridCell:pe","invid":1,"amount":500,"tax":65,"total":565,"n‌​ote":"myNote 0"}]}, In this cell is having a Complex type as first row. imagine like "cell":[{ComplexType}] So I was getting "[Object object]" in my first cell and other cells remain empty.

Thus corrected cell type as List<string> added grid data to it, and then added cell to List<InvoiceGrid>.

        JQGridJSONReader input = new JQGridJSONReader();
        input.Page = 1;
        input.Total = 1;
        input.Records = 5;

        input.Rows = new List<InvoiceGrid>();


        for (int i = 0; i < 5; i++)
        {
            InvoiceGrid invGrid = new InvoiceGrid();
            invGrid.Cell = new List<string>();
            JqGridCell gridrows = new JqGridCell();
            gridrows.Invid = 1 + i;
            gridrows.Amount = 500.00 + (i * 10);
            gridrows.Tax = 65.00 + (i * 10);
            gridrows.Total = gridrows.Amount + gridrows.Tax;
            gridrows.Note = "myNote " + i.ToString();
            invGrid.Cell.Add(gridrows.Invid.ToString());
            invGrid.Cell.Add(gridrows.InvDate.ToString());
            invGrid.Cell.Add(gridrows.Amount.ToString());
            invGrid.Cell.Add(gridrows.Tax.ToString());
            invGrid.Cell.Add(gridrows.Total.ToString());
            invGrid.Cell.Add(gridrows.Note.ToString());
            input.Rows.Add(invGrid);
        }

I was thinking that error is because of __type as extra json data. But it seems jqGrid ignore this.

My json data now look like this. Note:- I have ignored invid this time but can be included.

{"d":
{"__type":"JSONResponse:pe",
 "ActionType":"GRID_RESP",
 "JSONData":
            {"__type":"JQGridJSONReader:pe",
             "total":1,
             "page":1,
             "records":5,
             "rows":[
                    {"__type":"InvoiceGrid:pe",
                    "cell":["1","500","65","565","myNote 0"]},
                    {"__type":"InvoiceGrid:pe",
                    "cell":["2","510","75","585","myNote 1"]},
                    {"__type":"InvoiceGrid:pe",
                    "cell":["3","520","85","605","myNote 2"]},
                    {"__type":"InvoiceGrid:pe",
                    "cell":["4","530","95","625","myNote 3"]},
                    {"__type":"InvoiceGrid:pe",
                    "cell":["5","540","105","645","myNote 4"]}
                    ]
            },
 "Status":true
}}

Thanks a lot @Oleg.