It's all about the answers!

Ask a question

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


Kevin Johnson (111) | asked Sep 07 '20, 9:11 p.m.

Hello,


I am not able to figure out how to get a dojox.grid.DataGrid to simply be displayed as a custom presentation for EWM/RTC (7.0.1). I have successfully implement the Star example for the web UI: https://jazz.net/wiki/bin/view/Main/ContributingAttributePresentations

I do not understand what I need to do inside of postCreate(). If I could get the example here to display inside a Work Item editor/record then I may be able to implement the functionality that we need.

What do I need to do to simply get a Grid to display - let alone the custom functionality for now.

Where is documentation for postCreate()?

Thanks,
Kevin

One answer



permanent link
Lawrence Smith (3764) | answered Sep 09 '20, 3:44 p.m.
JAZZ DEVELOPER
edited Sep 09 '20, 3:55 p.m.

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


Comments
Kevin Johnson commented Oct 01 '20, 7:08 p.m.
Hello Lawrence,

Thank you. Your answer helped but I haven't figured it out yet.

Using Firefox(Inspector) I can see HTML is generated for the table but it is not rendered. Several nodes have heights & widths of 0 - or they are missing those. Some nodes have display=invisible. I wonder if it's an issue with needing dojo.domReady! I'm not able to get it to load.  The code from https://dojotoolkit.org/reference-guide/1.8/dojox/grid/DataGrid.html#a-simple-grid shows to use:
require([..., 'dojo/domReady!'],
    
but is that for AMD but it seems the code you gave me is pre-AMD since you have a dojo.provide() and dojo.declare().

I tried adding "dojo.addOnload()" but they made no apparent difference:
var GridPart = (dojo.addOnLoad( function() {

Would you care to make any further suggestions?

Regards,
Kevin

Your answer


Register or to post your answer.