How to connect dojox.grid.DataGrid to EWM/RTC web custom presentation?
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.
Thanks,
Kevin
|
One answer
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'});
/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
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.