creating dojo datagrid programmatically "sorry an error occured"

Question

I am trying to create a Dojo dojox.grid.DataGrid programmatically. It is getting created but does not show the output, instead it shows an error with the message: "Sorry, an error occurred"

Here is the code:

    var info=[
        {
            "Propery":"key1","Value":"value1"},
        {
            "Property":"key2", "Value":"value2"},
        {
            "Property":"key3","Value":"value3"}
    ];

    var layout = [
        {
            name: "Property",
            field: 'Property',
            width: "180px"},
        {
            name: "Value", 
            field: 'Value',
            width: "180px"}
    ];    

    var myStore = new dojo.data.ItemFileReadStore({data:{items:info}}); 

    var grid = new dojox.grid.DataGrid({
            store: myStore,
            structure: layout
        },"myDiv");       

    grid.startup();

I don't know where it is going wrong, please help me out.

Answer 1

Not sure if this will help, but in the example code you posted, you misspell the word 'Property' in one of your item, while the other two items have the word 'Property' spelled correctly. Refer to item with property key1. You have to make sure all your field names are spelled consistently.

Answer 2

Dude, this is like the third time I answer a question of yours. It strongly reminds me of the two before, but i'll have a try anyway.

Your example can't work, because in your layout-variable, you refer to a field named 'property' which doesn't exist in data.items (info).

You also did't get the concept of the json-array right. It schould represent like a bunch of object with a very similar structure. Assume you want to store some people, then you would have some keys like firstname, lastname, age, gender etc. Each person would have different values on this. The json-array would look like that:

    var people = [
        {
            firstname: 'maja',
            lastname: 'van hinten'
            age: 23
            gender: 'w'},
        {
            firstname: 'willy',
            lastname: 'wantstoknowit'
            age: 11
            gender: 'm'},
        {
            firstname: 'helmut',
            lastname: 'kohl'
            age: 101
            gender: 'm'},
        ];

Note, that the names of the properties are similar, just the values differ.

What you try to do obviously is, to store one single object as an array, and make each property an object. Think about it: [] means array, {} means object in JavaScript.

In fact, your info-variable should look like this:

    var info = [
        {
            "key1": "value1",       
            "key2": "value2",       
            "key3": "value3"}
    ];

and if you would like to store some more object it would look like this:

    var info = [
        {
            "key1": "value1",       
            "key2": "value2",       
            "key3": "value3"},
        {
            "key1": "value4",       
            "key2": "value5",       
            "key3": "value6"},
        {
            "key1": "value7",       
            "key2": "value8",       
            "key3": "value9"}
    ];

... objects stored in an array. Simple as that.

Now to your layout var:

It should discribe the structure of your DataGrid in relation to the data given by its store. So it descripes the columns as a whole, not the single cells. You can therefore only refer to the property-names (key1, key2, key3, or firstname, lastname, age, gender) but not to the values, as the may be different sometimes. You only know the structure of your objects, not its actual content.

Therefore, it should look like that:

   var layout = [
        {
            name: "Key1's content", // you can name this whatever you want
            field: 'key1',          // but not this, it refers to the property name of your objects
            width: "180px"},
        {
            name: "Key2's content", // this could be named randomly too of course
            field: "key2",
            width: "180px"},
       {
            name: "Key3's content", // and that one as well
            field: "key3",
            width: "180px"}
    ];