IBM Worklight 5.0.6 - Unable to add external Dojo component (script error on require Dojo Dgrid)

Question

I have downloaded Dgrid and, after renaming a folder in dgrid, i move it in Dojo folder.

In the HTML I include it like so:

<!--application UI goes here-->
<script type="text/javascript" src="dgrid/Grid.js"></script><!--prova importazione Dgrid-->
<script src="js/initOptions.js"></script>
<script src="js/MobileACG.js"></script>

Next I set it in build_dojo.xml:

<include name="dgrid/Grid.js" /> 

The error is in the require row below:

function creaGridTableArticoli(){
    dgrid
    require(["dgrid/Grid"], function(Grid){
        var columns = {
            first: {
                label: "First Name"
            },
            last: {
                label: "Last Name"
            }
        };
        var grid = new Grid({ /* options here */ }, "grid");
        WL.Logger.debug("ok");

    });

}

Answer 1

Note: In regard to Dojo, IBM Worklight only supports the IBM Dojo Toolkit for both runtime and tooling.
The IBM equivalent of dgrid is gridx.

That said, follow these steps to make dgrid work in your Worklight project.

1. Download dgrid
   • unzip, rename folder to "dgrid"
2. Download xstyle
   • unzip, rename folder to "xstyle"
3. Downlload put-selector
   • unzip, rename folder to "put-selector"
     
     

4. In Worklight 5.0.6

   • Create a new project
   • Create a new application and make sure to tick the Dojo checkbox to add Dojo to the project before closing the wizard
   • Optionally add the Android environment
   • Place the three folders from above at the root of the dojo folder belonging to the project:
     
     

   
   

5. Open build-dojo.xml and add the following includes:

   <include name="dojo/_base/declare.js"/>
   <include name="dojo/domReady.js"/>
   <include name="dgrid/**"/>
   <include name="put-selector/*"/>
   <include name="xstyle/**"/>
   

6. Open the HTML file and add a new script tag inside the HEAD element. Populate it with this code:

      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);
      });
   

7. Add the following inside the BODY element:
   <div id="grid"></div>

8. Build All and Deploy

9. Preview in Worklight Console

   You can also preview in the Design perspective in Eclipse, although I've noticed some rendering issue there in the table (not seen in the MBS (below); I guess it's fixable in CSS...).

Full size image: http://i.stack.imgur.com/B36qU.png