Cannot get JSFiddle to run Dojo Wizard

Question

I am trying to create a JSFiddle however i am unable to get the code to run. I have loaded the relevant resources and it does not work. I am creating a Dojo form Wizard.

Code :

Html

 <div dojoType="dojox.widget.WizardPane" id="EmployeeNameWizPane">

                <div data-dojo-type="dojox.layout.TableContainer"
                    data-dojo-props="cols:1,customClass:'employee_labels', labelWidth:180"
                    id="EmployeeNameContainer">

                    <label>1. What Is Your Name ?</label>

                    <s:textfield type="text" required="true" name="surname"
                        id="surname" placeholder="Your SurName"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your Surname!" title="(a). Surname :" 
                        style="width: 25em;" />


                    <s:textfield type="text" required="true" name="firstname"
                        id="firstname" placeholder="Your FirstName"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your FirstName!"
                        title="(b). FirstName :" 
                        style="width: 25em;" />

                    <s:textfield type="text" required="false" name="other_names"
                        id="other_names" placeholder="Other Names"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        title="(c). Other Names :" 
                        style="width: 25em;" />

                </div>
            </div> 



            <div dojoType="dojox.widget.WizardPane" id="EmployeeBirthNameWizPane">

                <div data-dojo-type="dojox.layout.TableContainer"
                    data-dojo-props="cols:1,customClass:'employee_labels', labelWidth:180"
                    id="EmployeeBirthNameContainer">
                    <label>2. Is you name on your Birth Certificate is
                        different from (1) above ?(e.g. Changed by Deed Poll / Marriage)</label>

                    <s:textfield type="text" required="true" name="birth_surname"
                        id="birth_surname" placeholder="Your SurName"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your Surname On Your Birth Certificate!"
                        title="(a). Surname :"
                        style="width: 25em;" />

                    <s:textfield type="text" required="true" name="birth_firstname"
                        id="birth_firstname" placeholder="Your FirstName"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your FirstName On Your Birth Certificate!"
                        title="(b). FirstName :" 
                        style="width: 25em;"/>

                    <s:textfield type="text" required="false" name="birth_other_names"
                        id="birth_other_names" placeholder="Other Names"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        title="(c). Other Names :"
                        style="width: 25em;" />


                </div>

            </div> 




            <div dojoType="dojox.widget.WizardPane" id= "EmployeeIdWizPane">

                <div data-dojo-type="dojox.layout.TableContainer"
                    data-dojo-props="cols:2,customClass:'employee_labels', labelWidth:250"
                    id="EmployeeIdentificationContainer">

                    <label>3. Please Enter At Least Two Forms Of Identification</label> 

                    <s:select data-dojo-type="dijit/form/FilteringSelect" id="id"
                        name="id" title= "Identification Type"
                        list="#{'':'Select Your I.D Type','1':'Passport','2':'Drivers Permit','3':'Electoral Identification'}"/>

                    <s:textfield type="text" required="true" name="idNumber"
                        id="idNumber" placeholder="Your Identification Number"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your Identification Number"
                        title="(a). Identification Number :"
                        style="width: 25em;" />         

                </div>
                    <div id="grid" class="grid"></div>

              </div>    

            </div>

Javascript

require([

    "dijit/form/CheckBox",
    "dijit/form/Textarea",
    "dijit/form/FilteringSelect",
    "dijit/form/TextBox",
    "dijit/form/ValidationTextBox",
    "dijit/form/DateTextBox",
    "dijit/form/TimeTextBox",
    "dijit/form/Button",
    "dijit/form/RadioButton",
    "dijit/form/Form",

]);

require([
    "dojox/validate/us",
    "dojox/validate/web",
    "dojox/layout/TableContainer",
    "dojox/layout/GridContainer",
    "dojox/widget/Wizard",
    "dojox/widget/WizardPane",
    "dojox/grid/_CheckBoxSelector"

]);

require([
    "dojo/parser",
    "dojo/_base/declare",
    "dojo/store/Memory",
    "dgrid/OnDemandGrid",
    "dgrid/ColumnSet",
    "dgrid/Selection",
    "dgrid/selector",
    "dgrid/Keyboard",
    "dgrid/extensions/DijitRegistry",
    "dgrid/editor",
    "dgrid/extensions/ColumnHider",


    "dojo/domReady!"

], function (parser, declare, MemoryStore, OnDemandGrid, ColumnSet, Selection, selector, Keyboard, DijitRegistry, editor, ColumnHider) {
    parser.parse();


    var data = [{
        id: "1",
        idType: "Passport",
        idNumber: "12121545WWW"
    }, {
        id: "2",
        idType: "Drivers Permit",
        idNumber: "11212154515 FF"
    }, {
        id: "3",
        idType: "Electoral Identification",
        idNumber: "425123123121"
    }];
    var store = new MemoryStore({
        data: data
    });
    var columns = [
        [
            [{
                label: "Id",
                field: "Id"
            },
            editor({
                label: "",
                field: "select",
                sortable: false,
                autoSave: true
            }, "checkbox"), {
                field: "idType",
                label: "Identification Type"
            }, {
                field: "idNumber",
                label: "Identification Number"
            }]
        ]
    ];

    var CustomGrid = declare([OnDemandGrid, selector, Selection, Keyboard, editor, DijitRegistry, ColumnHider]);




    var grid = new CustomGrid({
        store: store,
        columns: {
            col1: {
                label: "Id",
                field: "Id",
                hidden: true
            },

            selector: selector({
                selectorType: "checkbox"
            }),

            col3: {
                label: "ID Type",
                field: "idType"
            },

            col4: {
                label: "ID Number",
                field: "idNumber"
            }

        },
        SelectionMode: "none",
        allowSelectAll: true
    }, "grid");



    //grid.styleColumn("Id","display:none;");

    grid.renderArray(data);
});

Answer 1

The dgrid library is not a part of the Dojo library. You have to manually add that and configure it using data-dojo-config. Make sure you read this article. As you can see there (almost at the top of the article) it says:

dgrid is one of the first new Dojo packages to be distributed standalone instead of as a part of the DojoX namespace. This distribution model is part of a shift toward a distributed component development model in Dojo 2, made possible by advances in distributed code services like GitHub.

So you will have to add dgrid by yourself. I'm not finding an official CDN hosting dgrid at the moment, so you will have to host it by yourself.

But you could have validated this easily by yourself, like @epascarello said in the comment section, there are 404 errors and all of them are related to dgrid.