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();
}
(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
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
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:
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.
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);
},
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
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
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?
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
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!
page 1of 1 pagesof 2 pages