It's all about the answers!

Ask a question

problem while creating a grid in web UI


vinay reddy (1711205) | asked Feb 18 '09, 7:07 a.m.
I'm able to find only the headers of the grid but not the data. Can some one suggest what the problem is? Did I miss any grid specific css files or any other dojo.require statements? Is it the case that the syntax of the data is wrong?


(function(){

var PlatformUI = net.jazz.ajax.ui.PlatformUI;


dojo.declare("com.example.capmgmt.web.ui.internal.page.ViewPlan", , {
//templateString: "<div><div>test </div></div>",

templatePath: dojo.moduleUrl("com.example.capmgmt.web", "ui/internal/page/templates/ViewPlan.html"),
//templateCssPath: dojo.moduleUrl("com.example.capmgmt.web", "ui/internal/page/templates/ViewPlan.css"),

postCreate: function(){
var ActionRegistry = PlatformUI.getWorkbench().getActionRegistry();
ActionRegistry.registerAction("com.example.capmgmt.web.view", this, "view");
this.initialize();
},
initialize: function(){

this.gridStructure = ]
}];


this.gridData = ,



];

console.log("printing grid data");
console.dir(this.gridData);


this.icemodel = new dojox.grid.data.Table(null,this.gridData);

console.log("printing model");
console.dir(this.icemodel);


this.grid = new dojox.Grid({
model: this.icemodel,
//clientSort: "true",
style: "width: 100em; height: 150em;background:lightgreen;",
structure: this.gridStructure

});

console.log("printing grid");
console.dir(this.grid);
this.grid.render();
this.grid.refresh();

}

11 answers



permanent link
Matthew Jarvis (2411) | answered Feb 20 '09, 12:58 p.m.
JAZZ DEVELOPER
Vinay,

Are you seeing any errors in the browser console? If there are no errors in the browser console, you could determine if there is a CSS problem by inspecting the DOM using Firebug.

If you are missing a dojo.require, I would expect to see some errors in the browser console. If you are missing some CSS, I would expect all your data to exist in the DOM... It just might not be displayed correctly (or at all) if you're missing CSS.

Matt Jarvis
Jazz Foundation, Web UI Frameworks

permanent link
vinay reddy (1711205) | answered Feb 24 '09, 8:38 a.m.
It is a css problem. I had to write a new class file that match to all the div elements present in the grid. It is a bit surprising to see why no default css file has been picked for the grid.

permanent link
Richard Backhouse (6661) | answered Feb 24 '09, 10:18 a.m.
JAZZ DEVELOPER
Currently only css from dijit widgets will be automatically loaded. As
the grid is dojox based you will have to handle the including its css in
your own css resources. We should have this resolved when

https://jazz.net/jazz/resource/itemName/com.ibm.team.workitem.WorkItem/60148

is fixed.

Richard
Jazz Web UI and Server Development

vinaykumarreddyk wrote:
It is a css problem. I had to write a new class file that match to all
the div elements present in the grid. It is a bit surprising to see
why no default css file has been picked for the grid.

permanent link
vinay reddy (1711205) | answered Mar 04 '09, 1:57 a.m.
How to link the returned service data to a grid? I tried some thing like the following but could not succeed (shows no data on the grid). Any help?

this.icemodel = new dojox.grid.data.Table(null,resultSet)// here, resultSet is the service returned data








Here is the code snippet what I have


//function to initialize the grid after succesful service invocation
initialize: function(resultSet){




this.gridStructure =




]



}];


this.gridData = ,
,
,



];

console.log("printing grid data");
console.dir(this.gridData);

//this.icemodel = new dojox.grid.data.Table(null,this.gridData);//this works , shows the data of gridData variable in the grid
this.icemodel = new dojox.grid.data.Table(null,resultSet);// this does not work, shows empty data

console.log("printing model");
console.dir(this.icemodel);


this.grid = new dojox.Grid({

title: "test grid",

autoHeight: "true",
autoWidth: "true",
model: this.icemodel,
structure: this.gridStructure

});

console.log("printing grid");
console.dir(this.grid);



this.mainTabContainer.appendChild(this.grid.domNode);
this.grid.render();
this.grid.refresh();


},







//function to invoke service method
view: function(){

var srh = new ServiceResponseHandler(this, "initialize", "failure");
var serviceRequestOne = new ServiceRequest("com.example.jazztalk.common.IJazzTalkService", "getContributors");
TeamServerClient.invokeService(serviceRequestOne, srh, true);

},

permanent link
Matthew Jarvis (2411) | answered Mar 04 '09, 11:09 a.m.
JAZZ DEVELOPER
Vinay,

I would suggest using Firebug to check the format and contents of the data in resultSet before this line is executed:

this.icemodel = new dojox.grid.data.Table(null,resultSet)

resultSet should be of the same format as gridData (an array of arrays). If resultSet isn't the same format, you would need to either change your service to format the data differently, or you would need to reformat the data in your javascript code before passing it into the Table constructor.

Matt Jarvis
Jazz Foundation, Web UI Frameworks

permanent link
vinay reddy (1711205) | answered Mar 04 '09, 1:50 p.m.
The service returns an array of contributor items (similar to the example of jazztalk which returns message items). Is it not possible to assign such item array to a grid directly?Reason am asking this is that each item is a set of attribute name-value pairs and an array of items appears to fit the grid naturally. Please let me know if there any other models (grid) that could be used to bridge the format gaps.

permanent link
Matthew Jarvis (2411) | answered Mar 04 '09, 3:20 p.m.
JAZZ DEVELOPER
Vinay,

I'm not too familiar with the dojox.grid.data.Table widget. It sounds like your issue is with the format of the data that the widget's constructor is able to accept. I would suggest posting your question in the dojox.grid support forum so you can get an answer from an expert on this widget:

http://www.dojotoolkit.org/forum/532

Matt Jarvis
Jazz Foundation, Web UI Frameworks

permanent link
vinay reddy (1711205) | answered Mar 05 '09, 3:50 a.m.
If I invoke a service like the following

view: function(){

var srh = new ServiceResponseHandler(this, "initialize", "failure");
var serviceRequestOne = new ServiceRequest("com.example.jazztalk.common.IJazzTalkService", "getContributors");
TeamServerClient.invokeService(serviceRequestOne, srh, true);

},


What is the format that would be returned? Is it json or xml? If it is json, what is the specific format? Am asking this because popular dojo data stores expect specific format even in json. As an example, here is what the expected json for ItemFileReadStore
{ identifier :'id', items: },
{ name:'Fozzie Bear', wears:},
{ name:'Miss Piggy', pets:'Foo-Foo'}
]}


I also tried doing a print of the service data on firebug console to see the format. Does the following equate to json format?
printing service data

_eQualifiedClassName
"com.example.jazztalk:Message"
com.ibm.team.repository.typeName
"com.example.jazztalk.Message"
immutable
true
itemId
"_ikHBoAlcEd6DKaeMqwV8FQ"
modified
"2009-03-05T08:06:32.890Z"
modifiedBy
Object itemId=_KGRY4CFWEdq-WY5y7lROQw
stateId
"_ikHBoQlcEd6DKaeMqwV8FQ"
test
"hi"
text
"hello"
user
Object itemId=_z4qckATQEd63o8UhG-wMvw
workingCopy
false


Finally, does the mode of invocation (URL vs URI) has any affect on the format of the return data?

permanent link
Matthew Jarvis (2411) | answered Mar 05 '09, 9:25 a.m.
JAZZ DEVELOPER
Vinay,

If you load the page with ?debug=true and set a breakpoint in your code in Firebug, you should be able to see the exact format of the data that is returned. The format of the data returned by a service is typically determined by the "Accept" headers you send with your request, but it may depend on the service implementation. If the response is JSON, you should be able to print out the response on the console by calling:

console.debug(dojo.toJson(responseData));

Matt Jarvis
Jazz Foundation, Web UI Frameworks

permanent link
vinay reddy (1711205) | answered Mar 05 '09, 11:41 a.m.
When I did a console.dir(responseData), I was slightly confused looking at the data printed (mentioned in my earlier post). However, after using the console.debug(dojo.toJson(responseData)), it is clear about the format and I believe it would work fine after I wrap reponseData with "items" (which the store expects). Thanks Matt!

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.