Question

What is wrong with this code? I can get my json and debug it with alert (so that part works with xhr)… so for example, if I do this within the function (of xhr), alert(data[0].name) I get the correct value. There’s not much example neither on the web… but specifying the columns and adding the object store doesn’t show anything… Basically, I just want to load some json file (locally) and render it on the grid, but I will eventually use REST to handle CRUD within my application (So, I will be using JsonRest in a near future).

I think it had to do also with AJAX… I should probably put sync to true (since it seems my global variable doesn,t work properly… undefined).

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dgrid/OnDemandGrid",
    "dojo/_base/xhr",
    "dojo/store/Memory",
    "dojo/data/ObjectStore",
    "dgrid/Keyboard", 
    "dgrid/Selection"
], function(
    declare,
    _WidgetBase,
    Grid,
    xhr,
    Memory,
    ObjectStore,
    Keyboard, 
    Selection
){
    var dataStore;

    xhr.get({
        url: "app/resources/data/content.json",
        handleAs: "json"
    }).then(function(data){
    dataStore =  new ObjectStore({ objectStore:new Memory({ data: data.items }) });
    });

    return declare([_WidgetBase, Grid, Keyboard, Selection], {
    store: dataStore,
    columns:{
            name: { label: "name" },
            autodelete: { label: "autodelete" },
            groupe_id: { label: "groupe_id" },
            global: { label: "global" },
            date: { label: "date" },
            duree: { label: "duree" },
            description: { label: "description" },
            fichier: { label: "fichier" },
            pleinecran: { label: "pleinecran" },
            repertoire: { label: "repertoire" },
            taille: { label: "taille" },
            expiration: { label: "expiration" },
            id: { label: "id" },
            catergorie: { label: "catergorie" },
            brouillon: { label: "brouillon" }
        }, 

    postCreate: function() {
    }
});
});

Answer 1

For some reason, I just can’t pass a objectStore to a store (for dgrid – onDemandGrid). I separated my “data model” and my viewer this time. So, I have this in app/models (for instance, my code is pretty modular):

define([
    "dojo/_base/xhr",
    "dojo/store/Memory",
    "dojo/store/Observable"],
function(
    xhr,
    Memory, 
    Observable
){

    xhr.get({
        url: "app/resources/data/content.json",
        handleAs: "json",
        sync: true,
    }).then(function(data){
        contentStore = Observable(Memory({data: data}));
    });

    // global var "song_store"
    return contentStore;
});

Finally, I generate my grid like this by attaching my store to it (app/ui/layout/ContentGrid).

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dgrid/OnDemandGrid",
    "dgrid/Keyboard", 
    "dgrid/Selection",
    "dgrid/extensions/ColumnHider",
    "dgrid/editor",
    "app/models/content"
], function(
    declare,
    _WidgetBase,
    Grid,
    xhr,
    Memory,
    ObjectStore,
    Keyboard, 
    Selection,
    Hider,
    editor
){

    return declare([Grid, Keyboard, Selection, Hider], {
        store: contentStore,
        /*columns: {
            selected: editor({
                    label: " ",
                    autoSave: true,
                    sortable: false
                }, "checkbox"),
            Name: "Name",
            Time: "Duration",
            Year: "Year",
            Artist: "Artist",
            Album: "Album",
            Genre: "Genre"
        },*/

    columns: {
        selected: editor({
                    label: " ",
                    autoSave: true,
                    sortable: false
                }, "checkbox"),
        nom: "Name",
        autodelete: "Auto-delete",
        groupe_id: "Groupe ID",
        global: "Global",
        date: "Date",
        duree: "Lenght",
        description: "Description",
        fichier: "Filename",
        pleinecran: "Fullscreen",
        repertoire: "Folder",
        taille: "Size",
        expiration: "Expired",
        id: "id",
        catergorie: "Category",
        brouillon: "Example"
    },

    });
});