How to connect dojox.grid.DataGrid to EWM/RTC web custom presentation?

There is a later version of the article:

https://jazz.net/wiki/bin/view/Main/ContributingAttributePresentationsV2

Also there is an example here: 

https://rsjazz.wordpress.com/2017/08/21/status-history-presentation-for-rtc/

and similar articles from Ralph on rsjazz 

An example of a widget comes from the "Traditional planning" matrix. The javascript can be seen using the &debug=true#action= parameter on the url. (Loading will take a long time). The RiskMatrixPart implements a widget in a standalone widget way. The dojo grid is slightly different from the RiskMatrixPart table-made grid...

Here is the grid example built in a widget... I haven't tested this and a lot of files are missing... you may have to fix the id's parenthethes and placeAt...

Contributed in plugin.xml

    <extension
             point="net.jazz.ajax.cssBindingSets">
          <cssBindingSet
                id="com.example.gridpart.cssBindingSet"
                path="/gridpart/templates">
             <cssBinding
                jsModule="com.example.GridPart">
                <cssModule
                      path="/GridPart.css">
                </cssModule>
             </cssBinding>
          </cssBindingSet>
       </extension>
       <extension
             point="com.ibm.team.workitem.service.editorPresentations">
           <editorPresentation
            id="com.example.GridPart
            needsAttribute="false"   
                       widget="com.example.GridPart"/>
       </extension>

In GridPart.js... something like... 

    dojo.provide("com.example.GridPart");
    require(['dojo/_base/lang', 'dojox/grid/DataGrid' , 'dojo/data/ItemFileWriteStore' , 'dojo/dom' , 'dojo/domReady!'])    var GridPart= dojo.declare("com.example.GridPart", [ _Widget, _Templated], {
    templatePath: dojo.moduleUrl("com.example.gridpart/gridpart/templates/GridPart.html"),  constructor: function(parameters) {
          // copy parameters to variables
          this.fTitle= parameters.title;
  },

    postCreate: function() {
      this.inherited("postCreate", arguments, []);
      this.fGrid= getGridPart();
  },
    getGrid(): // copied from dojo.grid.DataGrid...
           function(lang, DataGrid, ItemFileWriteStore, Button, dom){
        /*set up data store*/
        var data = {
          identifier: "id",
          items: []
        };
        var data_list = [
          { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
          { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
          { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
        ];
        var rows = 60;
        for(var i = 0, l = data_list.length; i < rows; i++){
          data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
        }
        var store = new ItemFileWriteStore({data: data});
        /*set up layout*/
        var layout = [[
          {'name': 'Column 1', 'field': 'id', 'width': '100px'},
          {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
          {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
          {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
        ]];
        /*create a new grid*/
        var grid = new DataGrid({
            id: 'grid',
            store: store,
            structure: layout,
            rowSelector: '20px'});

        /*append the new grid to the div*/
        grid.placeAt("dapGridPartDiv");
        /*Call startup() to render the grid*/
        grid.startup();
    }}
    }

/templates/GridPart.html

    <div class="com-example-GridPart" dojoAttachPoint="dapGridPart">
  <div id="gridPartDiv" dojoAttachPoint="dapGridPartDiv">
    </div>

/templates/GridPart.css

... css content

Hope this helps...

-ls