jQuery Grid Plugin - jqGridForum

Topic RSS

Probles with simple array grid

09/07/2010
13:27

dabstar

New Member

Members

Forum Posts: 2

Member Since:
09/07/2010

Offline

Hello,

I have been trying to get the jgGrid to work using JSON and WCF Data Services. I tried all sorts of things with no luck. So I have now defaulted to a basic simple array data grid using the demo from jgGrid Demo page. But alas it doesn't work either.

I have grabbed the code from the demo page but it is not populating the grid with data. I get a nice grid with headers but no data.

Any thoughts? I am using 3.7.1 downloaded with all options enabled.

<head>
    <title>Untitled Page</title>
    <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <link rel="Stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/aja....." />
    <script src="http://ajax.microsoft.com/ajax....." type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="js/grid.locale-en.js" type="text/javascript"></script>
</head>
<body>
<table id="list4"></table>
<script>
    $(document).ready(function () {
        $("#list4").jqGrid({
            datatype: "local",
            height: 250,
            colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
            colModel: [
                 { name: 'id', index: 'id', width: 60, sorttype: "int" },
                 { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
                 { name: 'name', index: 'name', width: 100 },
                 { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
                 { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
                 { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
                 { name: 'note', index: 'note', width: 150, sortable: false }
             ],
            caption: "Manipulating Array Data"
        });

        var mydata = [
            { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
            { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
       ];

        for (var i = 0; i <= mydata.length; i++)
            $("#list4").addRowData(i + 1, mydata[i]);
    });
</script>
</body>

09/07/2010
14:54

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

First of all you should place grid.locale-en.js before jquery.jqGrid.min.js. If you use 3.7.x version you should better set all data at once instead adding there row after row. See http://stackoverflow.com/quest.....07#3197307 for example.

Moreover you write that you use JSON and WCF, but it you don't use it in the example. I also use jqGrid togeter with WCF. Information from http://stackoverflow.com/quest.....31#2678731 could be probably helpfull for you.

Best regards
Oleg

09/07/2010
16:34

dabstar

New Member

Members

Forum Posts: 2

Member Since:
09/07/2010

Offline

Thanks Oleg.

It was as simple as switching the two script references around..

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
55 Guest(s)

Currently Browsing this Page:
1 Guest(s)