Hi,
i don't really understand why this is not working, so if anyone as any ideas i would be most greatful. I am trying to create a Data Grid on the page so far i have got it to produce the grid without the headings, but it does let you select the line (but you are unable to view the data).
here is the full source code for the page after the PHP as finished. any help will be greatly received.
-->
Home Energy Surveys Ltd - EPC Portal - View Client
body {padding:0; margin:0; color:#000000; background-image:url(http://localhost/epc/igniter/images/portal/background.gif); BACKGROUND-REPEAT: repeat-x; background-color:#F78C29; font-family:Tahoma; font-size:12px;}
br{font-size:10px}
.s{font-family:Tahoma; font-size:10px; color:#9A9A9A; text-decoration:none}
.green{font-family:Tahoma; font-size:10px; color:#9CE438;}
.red{font-family:Tahoma; font-size:10px; color:#CC0033;}
.o{font-family:Tahoma; font-size:10px; color:#E58000;}
.blue{font-family:Tahoma; font-size:10px; color:#B81041}
.blue1{font-family:Tahoma; font-size:10px; color:#074671}
.w{font-family:Tahoma; font-size:10px; color:#FFFFFF; }
.b{font-family:Tahoma; font-size:10px; color:#393A3F; text-decoration:none}
.b1{font-family:Tahoma; font-size:10px; color:#595959; text-decoration:none}
.b2{font-family:Tahoma; font-size:10px; color:#373737; text-decoration:none}
.b3{font-family:Tahoma; font-size:10px; color:#373737; text-decoration:none}
.t1{background:url(http://localhost/epc/igniter/images/portal/1_z2.gif) center left no-repeat; margin:0px 0px 0px 27px; padding:0px 0px 0px 12px }
.t2{background:url(http://localhost/epc/igniter/images/portal/1_z2.gif) center left no-repeat; margin:0px 0px 0px 19px; padding:0px 0px 0px 12px }
.t3{background:url(http://localhost/epc/igniter/images/portal/1_z2.gif) center left no-repeat; margin:0px 0px 0px 21px; padding:0px 0px 0px 12px }
.t4{background:url(http://localhost/epc/igniter/images/portal/1_z2.gif) center left no-repeat; margin:0px 0px 0px 0px; padding:0px 0px 0px 12px }
#input{
width:160px; height:21px;
}
#input1{
scrollbar-3dlight-color:#E3E2E2;
scrollbar-track-color:#FFFFFF;
scrollbar-shadow-color:#E3E2E2 ;
scrollbar-face-color:#ECB637;
scrollbar-arrow-color:#E3E2E2;
scrollbar-darkShadow-color:#E3E2E2;
}
#textarea{
width:102px; height:48px;
border-width:1px;
border-style:solid;
border:none;
background-color:#F0EAE3;
overflow:auto
}
featured {
font-family:Tahoma; font-size:10px; color:#393A3F; text-decoration:none
}
.featured {
font-family:Tahoma;
font-size:10px;
color:#FFCC99;
text-decoration:none;
font-weight: bold;
}
.pagetitles {
font-family:Tahoma;
font-size:10px;
color:#666666;
text-decoration:none;
font-weight: bold;
}
.white {
font-family:Tahoma;
font-size:10px;
color:#FFFFFF;
text-decoration:none;
font-weight: bold;
}
.blueBIG {
font-family:Tahoma;
font-size:10px;
color:#B81041;
font-weight: bold;
}
.whitelarge {
font-family:Tahoma;
font-size:16px;
color:#FFFFFF;
text-decoration:none;
font-weight: normal;
}
/* Sortable tables */
table.sortable a.sortheader {
background-color:#CCCCCC;
color:#FFFFFF;
font-weight: bold;
text-decoration: none;
display: block;
height:15px;
font-size:11px;
}
table.sortable span.sortarrow {
color: black;
text-decoration: none;
}
table.background {
background-color: #C6C3C6;
border-collapse: collapse;
}
td.foreground {
background-color: #FFFFFF;
font-size: 9px;
}
#footer
{
BACKGROUND-IMAGE: url(http://localhost/epc/igniter/images/portal/linePiece.png);
WIDTH: 100%;
BACKGROUND-REPEAT: repeat-x;
POSITION: static;
TEXT-ALIGN: center
}
.dojoHtmlFisheyeListBar {
margin: 0 auto;
text-align: center;
}
.outerbar {
text-align: center;
float:left;
padding-top:3px;
padding-bottom:3px;
width: 100%;
height:40px;
background:#FFB871;
position:relative;
z-index:10000;
}
.dojoxFisheyeListItemLabel
{
BORDER-RIGHT: #666 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #666 2px solid;
DISPLAY: none;
PADDING-LEFT: 2px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #666 2px solid;
PADDING-TOP: 2px;
BORDER-BOTTOM: #666 2px solid;
FONT-FAMILY: Arial, Helvetica, sans-serif;
WHITE-SPACE: pre;
POSITION: absolute;
BACKGROUND-COLOR: #eee;
TEXT-ALIGN: center
}
.dojoxFishSelected
{
DISPLAY: block
}
.dojoxFisheyeListItemImage
{
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
BORDER-LEFT: 0px;
BORDER-BOTTOM: 0px;
POSITION: absolute
}
.dojoxFisheyeListItem
{
Z-INDEX: 2;
POSITION: absolute
}
.dojoxFisheyeListBar
{
POSITION: relative
}
.floatingstats
{
width:48%;
float:left;
position:relative;
padding:5px;
padding-top:20px;
}
.tableheader
{
background:url(http://localhost/epc/igniter/images/portal/background.gif);
background-repeat:repeat-x;
color:#FFFFFF;
}
table.helpT
{ text-align: center;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #404040;
width: 500px;
background-color: #fafafa;
border: 1px #6699CC solid;
border-collapse: collapse;
border-spacing: 0px; }
td.helpHed
{ border-bottom: 2px solid #6699CC;
border-left: 1px solid #6699CC;
background-color: #BEC8D1;
text-align: left;
text-indent: 5px;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
color: #404040; }
td.helpBod
{ border-bottom: 1px solid #9CF;
border-top: 0px;
border-left: 1px solid #9CF;
border-right: 0px;
text-align: left;
text-indent: 10px;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 11px;
color: #404040;
background-color: #fafafa; }
table.sofT
{ text-align: center;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #404040;
width: 580px;
background-color: #fafafa;
border: 1px #6699CC solid;
border-collapse: collapse;
border-spacing: 0px; }
.heading {
font-weight: bold;
padding-bottom: 0.25em;
}
#grid {
border: 1px solid #333;
width: 35em;
height: 30em;
}
@import "http://localhost/epc/igniter/dojo/dijit/themes/tundra/tundra.css";
@import "http://localhost/epc/igniter/dojo/dojo/resources/dojo.css";
@import "http://localhost/epc/igniter/dojo/dojox/grid/_grid/Grid.css";
//
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
dojo.require("dojo.parser");
// a grid view is a group of columns.
/*var view1 = {
cells: [[
{name: 'Initital', field:'Initials'},
{name: 'Result', field:'CallResult'},
{name: 'Contact Date', field:'ContactDate'},
{name: 'Notes', field:'JobNotes'}
]
]
};
// a grid layout is an array of views.
var layout = [ view1 ];*/
function initTable()
{
var data = {
identifier:'id',
items: [
{id: 0, initials: "RS", date: "2007-09-26 10:59:10", result: "215", notes: "Appointment was booked for 27/09/2007 12:30 for Rob Hindley"} ]};
// var datastore= new dojo.data.ItemFileWriteStore({data: data});
var datastore= new dojo.data.ItemFileReadStore({data: data});
// var model = new dojox.grid.data.Table(null, datastore);
var model = new dojox.grid.data.DojoData(null,datastore,{query:{id:'*'},clientSort:true})
var structure = [{
cells: [[
{name: 'ID', field:'id'},
{name: 'Initials', field:'initials'},
{name: 'Outcome', field:'result'},
{name: 'Date/Time', field:'date'},
{name: 'Notes', field:'notes'}
]]
}];
//var div1 = document.createElement("div");
//var grid = new dojox.Grid({id:"grid", structure:structure, model:model, autoWidth:true}, div1);
var div=document.createElement("div");
dojo.byId("gridContainer").appendChild(div);
var grid = new dojox.Grid({
"id": "grid",
"model": model,
"structure": structure
},div);
grid.render();
// div1.appendChild(grid.domNode);
// dijit.byId("domainSelectTablePane").setContent(div1);
//dijit.byId("gridContainer").domNode.appendChild(grid.domNode);
//grid.startup();
//grid.update();
// grid.refresh();
//dijit.byId("gridContainer").startup();
}
dojo.addOnLoad(initTable);
dojo.require("dojox.widget.FisheyeList");
function load_app(id){
//alert(id);
window.top.location=id;
}
function load_app2(id){
//alert(id);
window.open(id);
}
Our ID:
10000043
Date Submitted:
26/09/2007 10:59:10
Client Name:
Mr David Collier
House No:
21
Street:
Hallworthy Close
Town:
Leigh
County:
-->
Postcode:
WN7 3PS
Main Phone:
01942 607413
Property Type:
Detached
Number of Bedrooms:
Array
Reason for EPC:
Sale
Payment Method:
Account
any help
You may need a
You may need a grid.startup(), before the grid.render().
thanks but that had no
thanks but that had no effect, i have deceided to use the CSS to style a table, have spent 2 day messin around with it and my boss is starting to get a bit bothered.
More details about your grid problem?
Would you please explain what do you mean by "have got it to produce the grid without the headings"? What kind of grid do you have then?
Grid visibility issues can originate from too small or not defined size of a parent dom element (like the div you create). Plus, in your case, if you've overridden some standard styles, it would also make sense to try only with the standard Dojo grid stylesheets. I hope you're using Firebug - just use its Inspect tool to find out if the dom nodes for the grid were created. Then you'll know for sure if the issue is size/style related.