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.
- Download dgrid
- unzip, rename folder to "dgrid"
- Download xstyle
- unzip, rename folder to "xstyle"
- Downlload put-selector
- unzip, rename folder to "put-selector"
- unzip, rename folder to "put-selector"
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:
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/**"/>
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); });
Add the following inside the BODY element:
<div id="grid"></div>
- Build All and Deploy
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