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

i have downloaded dgrid and, after renaming folder in dgrid, move in dojo folder.

in html include 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 set in build_dojo.xml:

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

the error in 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");      });  } 

note: in regard dojo, ibm worklight supports ibm dojo toolkit both runtime , tooling.
ibm equivalent of dgrid is gridx.

that said, follow these steps make dgrid work in worklight project.

1. download dgrid
   • unzip, rename folder "dgrid"
2. download xstyle
   • unzip, rename folder "xstyle"
3. downlload put-selector
   • unzip, rename folder "put-selector"
     
     

4. in worklight 5.0.6

   • create new project
   • create new application , make sure tick dojo checkbox add dojo project before closing wizard
   • optionally add android environment
   • place 3 folders above @ root of dojo folder belonging project:
     
     

   
   

5. open build-dojo.xml , add 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 html file , add new script tag inside head element. populate 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 following inside body element:
   <div id="grid"></div>

8. build , deploy

9. preview in worklight console

   you can preview in design perspective in eclipse, although i've noticed rendering issue there in table (not seen in mbs (below); guess it's fixable in css...).

full size image: http://i.stack.imgur.com/b36qu.png