Jqgrid not show Data

Question

I using file *.ashx to get data from database. When I alert jsondata.responseText , it show json string

Respond text is:

{
 "total":2,
 "page":5,
 "record":10,
 "row":[
     {"i":0, "cell""["1","Desktop","Desktop Description","200"]},
     {"i":1, "cell""["2","Laptop","Laptop Description","1000"]},
     {"i":2, "cell""["2","DVD","DVD Description","100"]},
     {"i":3, "cell":["","","",""]}
 ]
}

But jqgrid not show data.

Please review my code and help me please !

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Sample_Json_Jqgrid._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>

    <%--<link rel="stylesheet" type="text/css" href="Resources/themes/coffee/grid.css" title="steel" media="screen" />
    <link rel="stylesheet" type="text/css" media="screen" href="Resources/themes/jqModal.css" />--%>
    <link href="Resources/css/ui.jqgrid.css"  media="screen" rel="stylesheet" type="text/css" />
    <link href="Resources/themes/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />

    <link href="Resources/src/css/jquery.searchFilter.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="Resources/src/css/ui.jqgrid.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="Resources/src/css/ui.multiselect.css" media="screen" rel="stylesheet" type="text/css" />

    <script src="Resources/js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
    <script src="Resources/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="Resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="Resources/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="Resources/src/grid.base.js" type="text/javascript"></script>
    <script src="Resources/src/ui.multiselect.js" type="text/javascript"></script>
    <script src="Resources/src/grid.celledit.js" type="text/javascript"></script>
    <script src="Resources/src/grid.common.js" type="text/javascript"></script>
    <script src="Resources/src/grid.custom.js" type="text/javascript"></script>
    <script src="Resources/src/grid.formedit.js" type="text/javascript"></script>
    <script src="Resources/src/grid.grouping.js" type="text/javascript"></script>
    <script src="Resources/src/grid.import.js" type="text/javascript"></script>
    <script src="Resources/src/grid.inlinedit.js" type="text/javascript"></script>
    <script src="Resources/src/grid.jqueryui.js" type="text/javascript"></script>
    <script src="Resources/src/grid.loader.js" type="text/javascript"></script>
    <script src="Resources/src/grid.postext.js" type="text/javascript"></script>
    <script src="Resources/src/grid.setcolumns.js" type="text/javascript"></script>
    <script src="Resources/src/grid.subgrid.js" type="text/javascript"></script>
    <script src="Resources/src/grid.tbltogrid.js" type="text/javascript"></script>
    <script src="Resources/src/grid.treegrid.js" type="text/javascript"></script>
    <script src="Resources/src/jqDnR.js" type="text/javascript"></script>
    <script src="Resources/src/jqModal.js" type="text/javascript"></script>
    <script src="Resources/src/jquery.fmatter.js" type="text/javascript"></script>
    <script src="Resources/src/jquery.searchFilter.js" type="text/javascript"></script>
    <script src="Resources/src/JsonXml.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">  
    <div>
        <table id="grid" cellpadding="0" cellspacing="0">
        </table>
        <div id="pager" style="text-align: center;">
        </div>
    </div>
    <script src="Resources/js/app.grid.js" type="text/javascript"></script>
    </form>
</body>
</html>

File javascript to jqgrid : app.grid.js

var mydata ;
function CreateGrid()
{     
   jQuery("#grid").jqGrid({
        datatype: "local",
        colNames:['ProductId','ProductName','Description','Price'], 
        colModel:[ 
            {name:'ProductId',index:'ProductId',sorttype:"text",hidden:false},
            {name:'ProductName',index:'ProductName',sorttype:"text",resizable:false,
             width:100,sortable:true,align:'left',editable:true},
            {name:'Description',index:'Description',sorttype:"text",resizable:false,
             width:1000,sortable:true,align:'left',editable:true}, 
            {name:'Price',index:'designation',sorttype:"int",resizable:false,
             width:100,sortable:true,align:'left',editable:true}
        ],
        rowNum: 1,
        rowList: [5, 10, 15],
        pager: jQuery('#pager'),
        imgpath: 'themes/redmond/images',
        sortname: 'ProductId',
        viewrecords: true,
        sortorder: "desc",
        caption: 'Products'
    }).jqGrid('navGrid','#pager',{edit:true,add:true,del:true});
    BinDataGrid();
}

function BinDataGrid()
{
    $("#grid").clearGridData();
    jQuery(function($) {
        $.ajax({
            type: "'POST'",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: "GetDataHandler.ashx",
            data: "{}",
            complete:  function(jsondata, stat)
            {
                window.alert("Status received is " + stat);
                window.alert("Response text is: " + jsondata.responseText);
                if (stat == "success")
                {
                    var thegrid = jQuery("#grid")[0];
                    thegrid.addJSONData(eval("(" + jsondata.responseText + ")"));
                }
            }
        });
    })
}
    jQuery(document).ready(function() {
    CreateGrid();
});

Please help me

Best regard

score 0 · Answer 1 · answered Nov 01 '10 at 09:24

Your responce text is wrong:

"cell""["1","Desktop","Desktop Description","200"]

this should be (note the : instead of " after the "cell" declaration):

"cell":["1","Desktop","Desktop Description","200"]

.. as the blank row you enter last, it is correct:

"cell":["","","",""]

also avoid using " in values, you should replace them with somethign other because some browsera cannot handle " escaping ... IE 6 ... :))

score 0 · Answer 2 · edited May 23 '17 at 10:33

Sorry but your code have so many errors, that it is difficult to describe all together. The first error in the JSON data with the quote (") instead of :. The data after the modification will be

{
    "total": 2,
    "page": 5,
    "record": 10,
    "row": [
        {"i": 0,"cell": ["1","Desktop","Desktop Description","200"]},
        {"i": 1,"cell": ["2","Laptop","Laptop Description","1000"]},
        {"i": 2,"cell": ["2","DVD","DVD Description","100"]},
        {"i": 3,"cell": ["","","",""]} 
    ]
}

where you have data like "i": 2 instead of "id": 2.

In the list of JavaScript files included in the <head> element you have full chaos. You included jqGrid more as once JavaScript files in compressed and uncompressed form. Moreover you used wrong order of files: you must include jquery-1.4.2.min.js before jquery-ui-1.8.5.custom.min.js which use it and include grid.locale-en.j before jquery.jqGrid.min.js. The file grid.loader.js by the way include all developer version of the files one more time. Moreover you should include in the head the meta element like <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> (see example).

You should read the How to Install part of the documentation, decide which version of jqGrid (compressed or developer version) you want to use and include it.

UPDATED: I could continue with the list of errors. The main JavaScript file app.grid.js is written also very dirty. It contain clear errors like type: "'POST'" instead of type: 'POST' or type: "POST", use eval function instead of JSON.parse and so on.

The usage of ashx to provide the data I find also not the best idea. Much better can be used ASMX web service, svc WCF service or ASP.NET MVC application with controller returns JSON data. Look at my old answer where you will find some links to examples to working code.

The usage of both jQuery(function($) {/**/} and jQuery(document).ready(function() {/**/}); in the same code is also not good.

I recommend you to verify the JSON data in http://www.jsonlint.com/ and verify your JavaScript code in http://www.jslint.com/.

Jqgrid not show Data

2 Answers2