Creating grid using gridx of dojo

Question

I have tried following example for creating grid using gridx of dojo by including all the src from online. But it shows Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience and multipleDefine error

<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dom.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/store/Memory.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dijit/form/Button.js"></script>
<script
src="http://cdn.rawgit.com/oria/gridx/1.3/core/model/cache/Sync.js"></script>
<script src="http://cdn.rawgit.com/oria/gridx/1.3/Grid.js"></script>
<script src="http://cdn.rawgit.com/oria/gridx/1.3/modules/CellWidget.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/domReady.js"></script>
<script type="text/javascript">
var grid;
var store;
dojo.addOnLoad(function(dom, Memory, Button, Cache, Grid) {
    name: 'gridx', store = new Memory({
        data : [ {
            id : 1,
            feedname : 'Feed4',
            startstop : 0,
            pause : '',
            config : ''
        }, {
            id : 2,
            feedname : 'Feed5',
            startstop : 0,
            pause : '',
            config : ''
        } ]
    });

var cacheClass = "gridx/core/model/cache/Sync";

var structure = [
    {
        id : 'feedname',
        field : 'feedname',
        name : 'Feed Name',
        width : '110px'
    },
    {
        id : 'startstop',
        field : 'startstop',
        name : 'Start/Stop',
        width : '61px',
        widgetsInCell : true,
        navigable : true,
        allowEventBubble : true,
        decorator : function() {
            //Generate cell widget template string
            return [
                    '<div style="text-align: center"><button data-dojo-type="dijit.form.Button" ',
                    'onClick="onStartStopButtonClick();" ',
                    'data-dojo-attach-point="btn" ',
                    'class="startStopButtonPlay" ',
                    'data-dojo-props="iconClass:\'startStopButtonPlayIcon\'" ',
                    '></button></div>' ].join('');
        }
    },
    {
        id : 'pause',
        field : 'pause',
        name : 'Pause',
        width : '61px',
        widgetsInCell : true,
        navigable : true,
        allowEventBubble : true,
        decorator : function() {
            //Generate cell widget template string
            return [
                    '<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
                    'onClick="onPauseButtonClick();" ',
                    'data-dojo-attach-point="btn2" ',
                    'class="pauseButton" ',
                    'data-dojo-props="iconClass:\'pauseIcon\'" ',
                    '></button></div>' ].join('');
        }
    },
    {
        id : 'config',
        field : 'config',
        name : 'Config',
        width : '61px',
        widgetsInCell : true,
        navigable : true,
        allowEventBubble : true,
        decorator : function() {
            //Generate cell widget template string
            return [
                    '<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
                    'onClick="onConfigButtonClick();" ',
                    'data-dojo-attach-point="btn3" ',
                    'class="configButton" ',
                    'data-dojo-props="iconClass:\'configIcon\'" ',
                    '></button></div>' ].join('');
        }
    } ];

//Create grid widget.
grid = Grid({
    id : 'grid',
    cacheClass : Cache,
    store : store,
    structure : structure,
    //autoHeight: true,
    columnWidthAutoResize : false
});

//Put it into the DOM tree.
grid.placeAt('compactWidgetGrid');
//Start it up.
grid.startup();

// TODO: I need to make Memory and store global somehow so I can get the data before creating the grid!!
updateGridXData(Memory, store);
}); 

function createDataStore(Memory, store) {
    currentGridXData = new Memory({
        // TODO: Replace data here with actual feed data received from server! 
        data : [ {
            id : 1,
            feedname : 'testingThis1',
            startstop : 0,
            pause : '',
            config : ''
        }, {
            id : 2,
            feedname : 'testingThis2',
            startstop : 0,
            pause : '',
            config : ''
        }, {
            id : 3,
            feedname : 'testingThis3',
            startstop : 0,
            pause : '',
            config : ''
        }, {
            id : 4,
            feedname : 'testingThis4',
            startstop : 0,
            pause : '',
            config : ''
        }, {
            id : 5,
            feedname : 'testingThis5',
            startstop : 0,
            pause : '',
            config : ''
        }, {
            id : 6,
            feedname : 'testingThis6',
            startstop : 0,
            pause : '',
            config : ''
        }, {
            id : 7,
            feedname : 'testingThis7',
            startstop : 0,
            pause : '',
            config : ''
        } ]
    });

    return currentGridXData;
}
function updateGridXData(Memory, store) {

    grid.model.clearCache();

    var appFeedsStore;

    // Create new data store for GridX

    //This line was giving a JavaScript error because appFeedListJSON undefined.
    //Commnent out and uncomment other line to see difference.
    appFeedsStore = createDataStore(Memory, store);
    //appFeedsStore = createDataStore(Memory, store);

    grid.setStore(appFeedsStore);

    grid.model.store.setData(appFeedsStore);

    //    grid.refresh();

    grid.body.refresh();

}

var toggled = false;
function toggle() {
    myToggleButton.set("iconClass", toggled ? "startStopButtonPlayIcon"
            : "startStopButtonStopIcon");
    toggled = !toggled;
}
function onPauseButtonClick() {
    alert("Pause!");
}

function onConfigButtonClick() {
    alert("Config!");
}

// onClick functions for the app three buttons: Start/Stop, Pause, Config

function onStartStopButtonClick() {

    alert("onStartStopButtonClick!");
}

function onPauseButtonClick() {

    alert("onPauseButtonClick!");
}

function onConfigButtonClick() {
    alert("onConfigButtonClick!");
}
</script>
</head>
<body class="claro">
<div id="compactWidgetGrid"></div>
</body>

I am trying this out using Tomcat server but not able to get the grid. Could you please help me with this?

Answer 1

You were the missing the dojo require statement. You can find the working code below. I believe you are a beginner in dojo so you can find excellent article about dojo @ http://dojotoolkit.org/reference-guide/1.7/dojo/require.html

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js' data-dojo-config="async: true, parseOnLoad: true"></script>
      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
          <link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/oria/gridx/1.3/resources/claro/Gridx.css">

          <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/document.css">

    <script type='text/javascript'>//<![CDATA[ 

    var grid;
    var store;

    require({
        packages: [
            {
                name: 'gridx',
                location: '//cdn.rawgit.com/oria/gridx/1.3'
            }
        ]
    },[
                 //Require resources.
                 "dojo/dom",
                 "dojo/store/Memory",
                 "dijit/form/Button",
                 "gridx/core/model/cache/Sync",
                 "gridx/Grid",
                     "gridx/modules/CellWidget",
                 "dojo/domReady!"
             ], function(dom, Memory, Button, Cache, Grid){

            store = new Memory({
                data: [
                    { id: 1, feedname: 'Feed4', startstop: 0, pause: '', config: ''},
                    { id: 2, feedname: 'Feed5', startstop: 0, pause: '', config: ''}
                ]
            });

            var cacheClass = "gridx/core/model/cache/Sync";

            var structure = [
                             { id: 'feedname', field: 'feedname', name: 'Feed Name', width: '110px' },

                             { id: 'startstop', field: 'startstop', name: 'Start/Stop', width: '61px',
                                    widgetsInCell: true,
                                    navigable: true,
                                    allowEventBubble: true,
                                    decorator: function(){
                                            //Generate cell widget template string
                                            return [
                                                    '<div style="text-align: center"><button data-dojo-type="dijit.form.Button" ',
                            'onClick="onStartStopButtonClick();" ',
                                                    'data-dojo-attach-point="btn" ',
                                                    'class="startStopButtonPlay" ',
                                                    'data-dojo-props="iconClass:\'startStopButtonPlayIcon\'" ',
                                                    '></button></div>'
                                            ].join('');
                                    },
                                    setCellValue: function(data){
                                            //"this" is the cell widget
                                            this.btn.set('label', data);
                                    }
                                },

                            { id: 'pause', field: 'pause', name: 'Pause', width: '61px',
                                    widgetsInCell: true,
                                    navigable: true,
                                    allowEventBubble: true,
                                    decorator: function(){
                                            //Generate cell widget template string
                                            return [
                                                    '<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
                            'onClick="onPauseButtonClick();" ',
                                                    'data-dojo-attach-point="btn2" ',
                                                    'class="pauseButton" ',
                                                    'data-dojo-props="iconClass:\'pauseIcon\'" ',
                                                    '></button></div>'
                                            ].join('');
                                    },                                                              
                                    setCellValue: function(data){
                                            //"this" is the cell widget
                                            this.btn2.set('label2', data);
                                    }
                                },

                            { id: 'config', field: 'config', name: 'Config', width: '61px',
                                    widgetsInCell: true,
                                    navigable: true,
                                    allowEventBubble: true,
                                    decorator: function(){
                                            //Generate cell widget template string
                                            return [
                                                    '<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
                            'onClick="onConfigButtonClick();" ',
                                                    'data-dojo-attach-point="btn3" ',
                                                    'class="configButton" ',
                                                    'data-dojo-props="iconClass:\'configIcon\'" ',
                                                    '></button></div>'
                                            ].join('');
                                    },
                                    setCellValue: function(gridData, storeData, cellWidget){
                                            //"this" is the cell widget
                                            cellWidget.btn3.set('label3', data);
                                    }
                                }
                ];

                 //Create grid widget.
                    grid = Grid({
                     id: 'grid',
                     cacheClass: Cache,
                     store: store,
                     structure: structure,
                     autoHeight: true,
                     columnWidthAutoResize: false
                 });

                 //Put it into the DOM tree.
                 grid.placeAt('compactWidgetGrid');

                 //Start it up.
                 grid.startup();

                     // TODO: I need to make Memory and store global somehow so I can get the data before creating the grid!!
                     updateGridXData(Memory, store);
             });

    function createDataStore(Memory, store){

        currentGridXData = new Memory({ 
            // TODO: Replace data here with actual feed data received from server! 
            data: [ 
                { id: 1, feedname: 'testingThis1', startstop: 0, pause: '', config: ''}, 
                { id: 2, feedname: 'testingThis2', startstop: 0, pause: '', config: ''}, 
                { id: 3, feedname: 'testingThis3', startstop: 0, pause: '', config: ''}, 
                { id: 4, feedname: 'testingThis4', startstop: 0, pause: '', config: ''}, 
                { id: 5, feedname: 'testingThis5', startstop: 0, pause: '', config: ''}, 
                { id: 6, feedname: 'testingThis6', startstop: 0, pause: '', config: ''}, 
                { id: 7, feedname: 'testingThis7', startstop: 0, pause: '', config: ''} 
            ] 
        }); 

        return currentGridXData;
    }

    function updateGridXData(Memory, store) {

                grid.model.clearCache();

                var appFeedsStore;

                // Create new data store for GridX

                //This line was giving a JavaScript error because appFeedListJSON undefined.
                //Commnent out and uncomment other line to see difference.
                appFeedsStore = createDataStore(Memory, store, appFeedListJSON);
                //appFeedsStore = createDataStore(Memory, store);

                grid.setStore(appFeedsStore);

                grid.model.store.setData(appFeedsStore);

            //    grid.refresh();

                grid.body.refresh();

            //},
            //error: function (error) {
            //    console.log("Inside ERROR");
           // }
        //});    
    }


    function onStartStopButtonClick(){
        alert("Start/Stop!");
    }

    var toggled = false;
    function toggle(){
        myToggleButton.set("iconClass", toggled ? "startStopButtonPlayIcon" : "startStopButtonStopIcon");
        toggled = !toggled;
    }

    function onPauseButtonClick(){
        alert("Pause!");
    }

    function onConfigButtonClick(){
        alert("Config!");
    }

    // onClick functions for the app three buttons: Start/Stop, Pause, Config

    function onStartStopButtonClick(){

        alert("onStartStopButtonClick!");
    }

    function onPauseButtonClick(){

        alert("onPauseButtonClick!");
    }

    function onConfigButtonClick(){
        alert("onConfigButtonClick!");
    }


    //]]>  

    </script>


    </head>
    <body>

  <body class="claro">

<div id="compactWidgetGrid"></div>

</body>
</html>