It's all about the answers!

Ask a question

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


Kevin Johnson (116) | 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.


Dashboards and work items are no longer publicly available, so some links may be invalid. We now provide similar information through other means. Learn more here.