javascriptdojodgriddstore

How to fiddle an easy OnDemandList (dgrid)?


I have tried to create a very simple jsfiddle to test an OnDemandList (sitepen/dgrid). But it does not render any rows. Does anybody have an idea what I have done wrong? Is it that a simple dstore/Memory does not offer methods like fetchRange? The jsFiddle can be found here: http://jsfiddle.net/rbeqqr2g/25/

require({
    packages: [
        {
            name: 'dgrid',
            location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
        },
        {
            name: 'xstyle',
            location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
        },
        {
            name: 'put-selector',
            location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
        },
        {
            name: 'dstore',
            location: '//cdn.rawgit.com/SitePen/dstore/master'
        }
    ]
}, [
    'dgrid/OnDemandList',
    'dstore/Memory',
    'dojo/dom',
], function(OnDemandList, Memory, dom) {
    var data = [
        { id: 1, name: 'Peter' },
        { id: 2, name: 'Paul' },
        { id: 3, name: 'Mary' }
    ];
    var store = new Memory({ 
        data: data 
    });
    var list = new OnDemandList({
        collection: store,
        minRowsPerPage: 5,
        noDataMessage: "Keine Daten vorhanden",
        renderRow: function (object, options) {
            console.log("Zeile wurde gerendert.")
            var div = document.createElement('div');
            div.appendChild(document.createTextNode(object.name));
            return div;
        }
    }, dom.byId('list'));
    list.startup();
});

Solution

  • You're using the most recent dstore, but an old dgrid. The < 1.x versions of dgrid did not support dstore, you can use a regular dojo/store/Memory instead. In dgrid < 1.x, you also needed a store property instead of collection.

    require({
        ...
    }, [
        'dgrid/OnDemandList',
        //'dstore/Memory',
        'dojo/store/Memory',  // < --- regular dojo/store
        'dojo/dom',
    ], function(OnDemandList, Memory, dom) {
        ...
        ...
        var list = new OnDemandList({
            //collection: store,
            store: store,      // <--- store property
            ...
        }, dom.byId('list'));
        list.startup();
    });
    

    http://jsfiddle.net/rbeqqr2g/28/

    Alternatively, unless you're stuck with dgrid 0.3.x, you can also simply use the modern dgrid:

    {
        name: 'dgrid',
        location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0'
        //location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
    },