Grid with WCF

I've got a page with a dojo grid on it. The initial load of static data works just fine, but whenever I call a WCF json service, it errors out. Here's the skeleton of the WCF service:

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class DefaultService
{
	[OperationContract]
	public DefaultData[] GetDefaultData()
	{
		...
	}
}

[DataContract]
public class DefaultData
{
	[DataMember(Name = "part_num")]
	public string part_num;
	[DataMember(Name = "min_temp")]
	public int min_temp;
	[DataMember(Name = "max_temp")]
	public int max_temp;
	[DataMember(Name = "max_pres")]
	public int max_pres;
	[DataMember(Name = "type")]
	public int type;
	[DataMember(Name = "thick")]
	public double thick;
	[DataMember(Name = "inner")]
	public double inner;
	[DataMember(Name = "outer")]
	public double outer;
}

Here's the page code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.dojo.aspx.cs" Inherits="GenevaPrototype._Default_dojo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
	<style type="text/css">
		@import "dijit/themes/tundra/tundra.css";
		@import "dojox/grid/_grid/Grid.css";
		@import "dojox/grid/_grid/tundraGrid.css";
		@import "general.css";
	</style>
	<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug:false,parseOnLoad:true"></script>
	<script type="text/javascript" src="data.js"></script>
	<script type="text/javascript" language="javascript">
dojo.require("dojo.parser");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");

function formatDegrees(value)
{
	return value + '&deg;';
}

function formatType(value)
{
	switch(value)
	{
		case 0:
			return "<img src='gasket_ring.png' alt='Ring' width='64' height='64'/>";
		case 1:
			return "<img src='gasket_full_face.png' alt='Full Face' width='64' height='64'/>";
	}
}

function getGCD(num, den)
{
	var a = num, b = den;
	for(var c = a % b; c != 0; c = a % b, a = b, b = c, c = a % b);
	return b;
}

function formatFraction(value)
{
	var parts = String(value).split('.');
	if(parts.length < 2)
	{
		return String(value);
	}

	var whole = parseInt(parts[0]);
	var decimal = parseInt(parts[1], 10);
	var power = Math.pow(10, parts[1].length);

	var gcd = getGCD(decimal, power);

	return ((whole == 0) ? "" : whole + " ") + decimal/gcd+"/"+power/gcd+""";
}

var subrow = [
	{ name: 'Part Number' },
	{ name: 'Min. Temp. (F)', formatter: formatDegrees },
	{ name: 'Max. Temp. (F)', formatter: formatDegrees },
	{ name: 'Max. Pressure' }
];

var view1 = {
	noscroll: true,
	rows: [[
		{ name: 'Part Number', field: 'part_num' },
		{ name: 'Type', formatter: formatType, field: 'type' }
	]]
};
 
var view2 = {
	rows: [[
		{ name: 'Thickness', formatter: formatFraction, field: 'thick' },
		{ name: 'I.D.', formatter: formatFraction, field: 'inner' },
		{ name: 'O.D.', formatter: formatFraction, field: 'outer' },
		{ name: 'Min. Temp. (F)', formatter: formatDegrees, field: 'min_temp' },
		{ name: 'Max. Temp. (F)', formatter: formatDegrees, field: 'max_temp' },
		{ name: 'Max. Pressure', field: 'max_pres' }
	]]
};

var structure = [
	view1,
	view2
];

function initModel(d)
{
	var g = dijit.byId("myGrid");
	var m = new dojox.grid.data.Objects(null, d);
	m.fields.get(m.fields.indexOf("type")).compare = function(a, b)
		{
			return (b > a ? 1 : (a == b ? 0 : -1));
		}
	g.setModel(m);
	g.refresh();
}

function bindData(d)
{
	initModel(d);
}
	</script>
</head>
<body class="tundra" onload="initModel(dummyData);">
	<form runat="server">
		<!-- start -->
		<asp:ScriptManager ID="scriptManager" runat="server">
			<Services>
				<asp:ServiceReference Path="~/DefaultService.svc" />
			</Services>
		</asp:ScriptManager>
		<!-- end -->
		<h1>Gasket Lookup</h1>
		<div class="partsContainer">
			<div class="gridContainer">
				<div id="myGrid" dojoType="dojox.Grid" jsId="myGrid" structure="structure"></div>
			</div>
			<button dojoType="dijit.form.Button" id="Button2">
				Update
				<script type="dojo/method" event="onClick">
					DefaultService.GetDefaultData(bindData);
				</script>
			</button>
		</div>
	</form>
</body>
</html>

If I hit the update button, I get the error "this.data[inRowIndex] has no properties" in Firebug. Also, if I scroll past the number of records in the new data set (50), everything is blank. The original data set has about 500 items in it. Does dojo grid not allow changing the number of records shown in a grid between queries?

I tried removing the WCF

Submitted by richelesro on Mon, 06/30/2008 - 18:14.

I tried removing the WCF references and just use a different Javascript array and the error still occurs. The grid and/or model doesn't like it when the number of elements changes.

For those that come behind,

Submitted by richelesro on Mon, 06/30/2008 - 23:08.

For those that come behind, I found the issue. You have to set the rowCount value before updating the model. Here's the updated initModel() function for the above code:

function initModel(d)
{
	var g = dijit.byId("myGrid");
	var m = new dojox.grid.data.Objects(null, d);
	m.fields.get(m.fields.indexOf("type")).compare = function(a, b)
		{
			return (b > a ? 1 : (a == b ? 0 : -1));
		}
	g.rowCount = d.length;
	g.setModel(m);
}

Once I did this, it worked fine with WCF.

Search

I tried removing the WCF

For those that come behind,