CODEWITHSUNDEEP
javascriptjqueryhtmljqgrid
amicngh
amicngh

Reputation: 7899

How to load data from jqgrid using JSON

Initially I have create one one json message and hold it in a variable then trying to load this data in grid which works fine.Theni tried uisng JSON but getting only Loading message. I dont know what is wrong I have done. When check in firebug I can see json message comming from server.

    <!DOCTYPE html>
    <html>
    <head>
       <link rel="stylesheet" href="css/jquery-ui-1.8.16.css" />
       <link rel="stylesheet" href="css/ui.jqgrid.css" />
        <script src="scripts/jquery-1.6.3.min.js"></script>
       <script src="scripts/jquery-ui-1.8.16.min.js"></script>
       <script src="scripts/grid.locale-en.js"></script>    
       <script src="scripts/jquery.jqGrid.min.js"></script>

    </head>
    <body>
    <h1>hey</h1>
      <table id="list"></table>
    </body>

    <script>
    $(function () {
        $("#list").jqGrid({
        url: "/xyz/filteredUsersAsJson",
        datatype: "json",
        mtype: "GET",
        colNames: ["Username", "User Type", "Full Name", "Telephone", "Email", "Region","Action"],
        colModel: [
        { name: "UserName", width: 55 },
        { name: "UserType", width: 90 },
        { name: "FullName", width: 80, align: "right" },
        { name: "Contact", width: 80, align: "right" },
        { name: "Email", width: 80, align: "right" },
        { name: "Region", width: 150, sortable: false },
        { name: "", width: 150 }
        ],
        pager: "#pager",
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: "UserName",
        sortorder: "asc",
        viewrecords: true,
        height: "100%",
        width: 940,
        shrinkToFit: true,
        multiselect: true,
        toppager: true,
        gridview: true,
        loadui:'block',
        autoencode: true,
        caption: "Users",
        jsonReader: {
        repeatitems: false,
        id: "UserName",
        cell: "",
        root: function (obj) { return obj; },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
        }
        });
        });
    </script>
    </html>

json message: 

{
"page":"1",
   "total":2,
   "records":"13", 
   "rows": [{"UserName":"achauhan","UserType":"1","FullName":"1","Contact":"1","Email":"1","Region":"1"},
            {"UserName":"amnu","UserType":"2","FullName":"2","Contact":"2","Email":"2","Region":"1"},
            {"UserName":"frt","UserType":"3","FullName":"3","Contact":"3","Email":"3","Region":"1"},
            {"UserName":"sdsds","UserType":"4","FullName":"4","Contact":"4","Email":"4","Region":"1"},
            {"UserName":"sdsd","UserType":"5","FullName":"5","Contact":"5","Email":"5","Region":"1"}] 
}

Upvotes: 1

Views: 4375

Answers (2)

Grigur
Grigur

Reputation: 465

UPDATE

You have some errors in jsonReader declaration, it must be like this:

jsonReader: {
    repeatitems: false,
    id: "UserName",
    cell: "",
    root: function (obj) { return obj.rows; },
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.records; }
}

I have tested, it works.

-

Original anwser

How to load data from jqgrid using local data

If you want to use local data, you have to replace:

  1. url: "/xyz/filteredUsersAsJson", datatype: "json", mtype: "GET" with datatype: "local", data: yourVariableWithLocalData

  2. jsonReader with localReader

Upvotes: 1

Thijs Limmen
Thijs Limmen

Reputation: 714

try changing: 

$("#list").jqGrid

to

$("#jqgrid").jqGrid

Upvotes: 0

Related Questions