CODEWITHSUNDEEP
dojo
Pawan
Pawan

Reputation: 32321

Filling Dojox.grid.DataGrid with JSON Data

I have JSON Data in this format :

var jsonData = [{date:'August 19, 2004',open:100.01,high:104.06},{date:'August 19, 2004',open:100.01,high:104.06},{date:'August 19, 2004',open:100.01,high:104.06}];

How can i print this data inside my Dojox.grid.DataGrid

<body class=" claro ">
        <span dojoType="dojo.data.ItemFileReadStore" jsId="store1" url="data.json">
        </span>
        <table dojoType="dojox.grid.DataGrid" store="store1" 
       style="width: 100%; height: 100%;">
            <thead>
                <tr>
                    <th width="150px" >
                        Title of Movie
                    </th>
                    <th width="150px">
                        Year
                    </th>
                    <th width="150px" >
                        Producer
                    </th>
                </tr>

            </thead>
        </table>

    </body>

Upvotes: 0

Views: 4825

Answers (1)

Frode
Frode

Reputation: 5710

Remeber that ItemFileReadStore (all types of stores actually) need data in a specific format. You are telling me that you have a jsonData variable:

var jsonData = [{date:'August 19, 2004',open:100.01,high:104.06},{date:'August 19, 2004',open:100.01,high:104.06},{date:'August 19, 2004',open:100.01,high:104.06}];

This is not the format ItemFileReadStore wants. ItemFileReadStore wants an object with at least two properties: identifier and items. So change your data to:

var jsonData = {identifier: "id", 
                items: [
                  {id: 1, date:'August 19, 2004',open:100.01,high:104.06},
                  {id: 2, date:'August 19, 2004',open:100.01,high:104.06},
                  {id: 3, date:'August 19, 2004',open:100.01,high:104.06}
                ]};

As you can see, it's now an object with the required properties. The identifier property tells the store to use a property named "id" to uniquely distinguish the items. Your objects didn't have a unique property, so I added the id property on all items. You probably have some other property you can use.

Next, since you have your data in a variable, why are you telling your ItemFileReadStore to get data from a URL called data.json? Instead, do:

<span dojoType="dojo.data.ItemFileReadStore" jsId="store1" data="jsonData"></span>

Lastly, your Grid itself. The table headers need to correspond to properties on the items in the store. You have, for example date, open and high, so use the field attribute on each th:

<table dojoType="dojox.grid.DataGrid" store="store1" 
   style="width: 100%; height: 500px;">
    <thead>
        <tr>
            <th width="150px" field="date">Title of Movie</th>
            <th width="150px" field="open">Year</th>
            <th width="150px" field="high">Producer</th>
        </tr>
    </thead>
</table>

I added "height: 500px" to the table, but that may not be necessary for you.

Upvotes: 4

Related Questions