grid not rendering in IE7 | The Dojo Toolkit

also tried it with

Submitted by giwon on Sun, 08/17/2008 - 18:14.

also tried it with refresh(), update(), render()
neither of those worked for me...

Login or register to post comments

Need more info

Submitted by dtynan on Sun, 08/17/2008 - 19:21.

I think you probably need to add more info, for anyone to figure this out. Like a whole test sample, or, at least the full set of grid-related code ... so like your 'layout' and any CSS stuff. Also, which version of dojo, and does it work in IE6? IE is a little particular about things ... for example, having an extra comma on the last line of your layout (after the last column), can cause IE not to display...

ps - There's also like a start() or startup(), though I'm on latest nightly code so not sure how far back that applies.

Dylan Tynan

Login or register to post comments

hey there :) so my main html

Submitted by giwon on Sun, 08/17/2008 - 20:09.

hey there :)
so my main html page is as follows

<head>
<script type="text/javascript" src="../dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript" src="ahnen.js"></script>
<script>

dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.DateTextBox");
dojo.require("modules.form.InsertFormWidget");
dojo.require("modules.form.SearchWidget");

var args = dojo.queryToObject(window.location.search.replace("?",""));

var foo = function() {
alert("foo");
}

dojo.addOnLoad(
function() {
var a = dijit.byId('test');
eval("var sw = new "+args['moduleName']+"();");
a.setContent(sw.domNode);
sw.startup();
}
);

</script>

<style type="text/css">
@import "../dojo/resources/dojo.css";
@import "../dijit/themes/tundra/tundra.css";
@import "../dojox/grid/_grid/tundraGrid.css";

@import "../dijit/demos/mail/mail.css";
@import "./resources/AccordionMenu.css";
</style>

</head>

<body class="tundra">

<div dojoType="dijit.layout.ContentPane" id="test"></div>

</body>

the widget gets added programmatically
the declaration is:

dojo.provide("modules.form.SearchWidget");
dojo.require("dojo.parser");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.data.QueryReadStore");

var view = {
cells: [[
{name:'Name', field:'name', width: "30%"},
{name:'Lat', field:'lat',width:"30%"},
{name:'Lng', field:'lng',width:"40%"}
]]
};

var layout = [view];

var errorHandler = function(error, request){
console.debug(error);
}

var searchLocation = function(e) {

var data = new dojox.grid.data.DojoData(null,this.dataStore,{jsId: 'dataModel', rowsPerPage: 20, query: {name:this.locationName.getValue()}});
this.dataModel = data;
this.dataGrid.setModel(data);
};

var applyLocation = function(e) {
var row= this.dataGrid.selection.getSelected()[0];
var selected1 = this.dataGrid.model.data[row];
console.log(selected1['name']);
console.log(selected1['ortId']);
window.opener.setLocation(selected1['name'],selected1['ortId']);
dijit.byId('test').destroy();
window.close();
};

var cancelLocationSearch = function(e) {
dijit.byId('test').destroy();
window.close();
};

dojo.declare("modules.form.SearchLocationWidget",[dijit._Widget,dijit._Templated],
{
templatePath: dojo.moduleUrl("modules.form","templates/SearchLocation.html"),
templateString: "",
src: "",
widgetsInTemplate: true,
_onClickSearch: searchLocation,
_onClickOk: applyLocation,
_onClickCancel: cancelLocationSearch,
dataStore: new dojox.data.QueryReadStore(
{url:"ort.php"}
),
dataModel: new dojox.grid.data.DojoData(),
startup: function() {
this.dataModel.store = this.dataStore;
this.dataGrid.setModel(this.dataModel);
this.dataGrid.startup();
this.dataGrid.render();
this.inherited(arguments);
}
});

and the template for the SearchLocationWidget is

<div style="width: 1000px; height: 500px" dojoType="dijit.layout.ContentPane">
<div dojoType="dijit.form.TextBox" dojoAttachPoint="locationName">
</div>
<div dojoType="dijit.form.Button" dojoAttachPoint="searchLocationButton" dojoAttachEvent="onClick:_onClickSearch">
Search
</div>
<div dojoType="dijit.form.Button" dojoAttachPoint="searchLocationButton" dojoAttachEvent="onClick:_onClickOk">
OK
</div>
<div dojoType="dijit.form.Button" dojoAttachPoint="searchLocationButton" dojoAttachEvent="onClick:_onClickCancel">
Cancel
</div>

<div style="width:500px; height: 200px" id="grid" dojoType="dojox.Grid" jsId="dataGrid" structure="layout" dojoAttachPoint="dataGrid">
</div>

</div>

Login or register to post comments

in my main html in the

Submitted by giwon on Sun, 08/17/2008 - 20:11.

in my main html in the dojo.addOnLoad -> the args['moduleName'] evaluates then to modules.form.SearchLocationWidget, so that the widget gets created on the fly..

Login or register to post comments

question...

Submitted by dtynan on Sun, 08/17/2008 - 22:04.

So do your buttons and textbox in your searchLocationWidget show up ok, and it's just the grid that doesn't? Or, does none of it show? Can you tell if the grid is there and just blank/empty or if it looks like it's not there at all?

Have you tried removing the width: XX% values from your layout (or trying px values)?

Login or register to post comments

hello..the other widgets

Submitted by giwon on Mon, 08/18/2008 - 03:15.

hello..the other widgets show up ok..its just the grid...
and yes, there is "something"..its just a grey box..tried other values as well...that didnt work...

Login or register to post comments

Me too..

Submitted by gstowe on Wed, 08/20/2008 - 15:51.

Did you figure this out? I'm running into a similar problem. The grid looks fine in FF, it's invisible in IE. I can tell from the scrollbar behavior that the data is getting pulled into the grid, but it's all invisible. Weirdly, it seems to be related to a cell formatter function which works fine in FF. My function was:

(Using this function, the grid is empty in IE)

function formatStatus(f,ind){

var it=this.grid.model.getItem(ind);
var myStore = this.grid.model.store;
if(it){
if(myStore.getValue(it,'value') != myStore.getValue(it,'defaultValue'))
return('User Set');
else
return ('Default');
}

return f;
}

If I comment out everything but the "return f" the grid appears correctly. If I include just the single first line, where I reference the grid object, the grid blanks out. (Like this)

(Using this formatter function results in an empty grid in IE)
function formatStatus(f,ind){

var it=this.grid.model.getItem(ind);
/* var myStore = this.grid.model.store;
if(it){
if(myStore.getValue(it,'value') != myStore.getValue(it,'defaultValue'))
return('User Set');
else
return ('Default');
return ('Default');
}
*/
return f;
}

Login or register to post comments

Fixde my own problem

Submitted by gstowe on Wed, 08/20/2008 - 17:30.

Not sure if yours is the same or not, but mine was caused by this problem. I had added a dojo method to the data store object, and IE7 has the problem detailed in the link below, preventing the script from being executed.

var row = this.getRow(rowIdx);
return row ? row.__dojo_data_item : null;

So later in my cell formatting function (in the post above), getItem was not defined.

Login or register to post comments

Any new insights for the

Submitted by J4R on Wed, 08/27/2008 - 11:22.

Any new insights for the "Grid not rendering in IE" problem? I've the same problem with Grids/DataGrids in Dialogs and in some cases I had success with enclosing the Grids div in another div, but this didn't work everywhere...

Login or register to post comments

info?

Submitted by dtynan on Tue, 09/02/2008 - 01:16.

I've been doing some grid stuff using the latest code updates (every couple of days). Along the way, at various times, there were various problems, for me, displaying a grid in IE that often worked fine in FF2/3. I don't want to speak for the dojo guys, but my experience has been that there are several gotchas, depending on what version of dojo and/or IE. I think it's probably difficult for them to help out much without very exact problem specifics (ie short example code, problem description, version of dojo, version of IE, etc).

It could be a dojo prob, an IE prob, some CSS-related thing, a syntax error, etc. .... you'll have better luck if you submit a full detailed description I think. My $.02

Dylan Tynan

Login or register to post comments