2

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

    });

}
Idan Adar
  • 44,156
  • 13
  • 50
  • 89
userA91
  • 47
  • 1
  • 7

1 Answers1

2

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:

    enter image description here

  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: https://i.stack.imgur.com/B36qU.png https://i.stack.imgur.com/B36qU.png

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • wow.IT works.But I don't understand one thing.What are xstyle and put-selector? – userA91 Jul 19 '13 at 15:37
  • the dgrid installation instructions mention to add them as well, so I suppose that if you continue developing using dgrid you will eventually need them depending on what you will want to implement. Google. – Idan Adar Jul 19 '13 at 15:44
  • why including also include name="dojo/_base/declare.js"/>' – Angelo Jul 19 '13 at 15:44
  • Previewing the app failed w/out it (chrome dev tools showed it was missing). – Idan Adar Jul 19 '13 at 15:45
  • There is room for optimization for sure, this is just to get it working. – Idan Adar Jul 19 '13 at 15:45
  • how optimize it? you can provide me a guide? – Angelo Jul 19 '13 at 15:48
  • Nope. Don't have any. Optimizing means removing files you don't need, maybe re-order files so you won't need to include so many different ones but just specific folders, I don't know... Feel free to up-vote the answer. :) – Idan Adar Jul 19 '13 at 15:52