Use dgrid/Grid by Dojo CDN

0
votes

i tried to use dgrid by the including dojo 1.10 by CDN but it does not work.

<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad:true"></script>
<script>
require([ "dgrid/Grid", "dojo/domReady!" ], function(Grid) {
    var grid = new Grid({
        columns : {
            serverName : "Server Name",
            serviceName : "Service Name",
            available : "Verfügbar"
        }

    }, "grid");
});

Where is the problem? By loading the site i get an Err: scriptErr.

4
dojodgrid
Do you have a closing </script> tag after the require call? The second argument to the Grid constructor is an id of an element to attach to, so, as @frank pointed out, you need an element with an id of "grid" in your HTML as well. - Thomas Upton

4 Answers

2
votes

Here's a really complete example.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello dgrid!</title>
    <script 
        src='//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js' 
        data-dojo-config="async: true, parseOnLoad: true">
    </script>

    <script>
        require({
            packages: [{
                name: 'dgrid',
                location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.15'
            }, {
                name: 'xstyle',
                location:'//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
            }, {
                name: 'put-selector',
                location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
            }]
            },[
                'dgrid/Grid',
                'dojo/domReady!'
            ], function (Grid) {

            var data = [
                { first: 'Bob', last: 'Barker', age: 89 },
                { first: 'Vanna', last: 'White', age: 55 },
                { first: 'Pat', last: 'Sajak', age: 65 }
            ];

            var grid = new Grid({
                columns: {
                    first: 'First Name',
                    last: 'Last Name',
                    age: 'Age'
                }
            }, 'grid');

            grid.renderArray(data);
        });
    </script>
</head>
<body>
    <div id="grid"></div>
</body>
</html>
1
votes

dgrid and its dependencies are not hosted on the Google CDN, let alone as a sibling of Dojo, and you don't seem to have any packages configuration to pick up dgrid, xstyle, and put-selector elsewhere.

While dgrid is not published to any CDN, RawGit now has a feature they're testing out which is capable of caching github resources on MaxCDN. You can take advantage of this for dgrid with a configuration like the following:

var dojoConfig = {
    async: true,
    packages: [{
        name: 'dgrid',
        location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.15'
    }, {
        name: 'xstyle',
        location:'//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
    }, {
        name: 'put-selector',
        location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
    }]
};

Of course, remember that RawGit's CDN service has no guarantee of 100% uptime and thus should be used only for prototyping, not production, but you should ideally be rolling a custom build for production anyway.

0
votes

You need to put a div tag in the body.

<body>
    <div id="grid"></div>
</body>
0
votes

have you tried calling grid.renderArray(data)?

Here is a complete example

require(["dgrid/Grid", "dojo/domReady!"], function(Grid){
    var data = [
        { first: "Bob", last: "Barker", age: 89 },
        { first: "Vanna", last: "White", age: 55 },
        { first: "Pat", last: "Sajak", age: 65 }
    ];
 
    var grid = new Grid({
        columns: {
            first: "First Name",
            last: "Last Name",
            age: "Age"
        }
    }, "grid");
    grid.renderArray(data);
});

more examples here