problem while creating a grid in web UI
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
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 |
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.
|
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 |
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); }, |
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 |
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.
|
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 |
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? |
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 |
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
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.