Feb 17, 2011, 1:25 PM
[CLOSED] Gridpanel Null problem with JSON deserialization
Hi
I have a problem and have come to a dead end.
If I load json from a database field, deserialize it and databind the object to a gridpanel store, I get different results depending on whether the json contain nulls (for Int data types).
I have put together an example of this (bypassing the string coming out of the DB). The really strange thing is that if I do it client side, I get the right result independent of whether the data contains nulls or not.
I hope you can help as I'm starting to loose my hair.
Kind regards
Ian
The example below, has 2 gridpanels in it. The top one is databound at the server side, the bottom one at the client side. If you press the button on the top one marked "with nulls", you will see the bottom row change to: from 1,0,0,5,0,0,6 to 0,0,0,0,0,0,6 even though the data is exactly the same, with the exception of the use of null.
The lower gridpanel is databound at client side and works perfectly whatever the data.
I have a problem and have come to a dead end.
If I load json from a database field, deserialize it and databind the object to a gridpanel store, I get different results depending on whether the json contain nulls (for Int data types).
I have put together an example of this (bypassing the string coming out of the DB). The really strange thing is that if I do it client side, I get the right result independent of whether the data contains nulls or not.
I hope you can help as I'm starting to loose my hair.
Kind regards
Ian
The example below, has 2 gridpanels in it. The top one is databound at the server side, the bottom one at the client side. If you press the button on the top one marked "with nulls", you will see the bottom row change to: from 1,0,0,5,0,0,6 to 0,0,0,0,0,0,6 even though the data is exactly the same, with the exception of the use of null.
The lower gridpanel is databound at client side and works perfectly whatever the data.
<%@ Page Language="C#" AutoEventWireup="true"%>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Newtonsoft.Json.Linq.JObject res = null;
Newtonsoft.Json.JsonSerializerSettings setting = new Newtonsoft.Json.JsonSerializerSettings();
setting.NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore;
if (Request["WithNulls"] != null)
{
res = Newtonsoft.Json.JsonConvert.DeserializeObject<Newtonsoft.Json.Linq.JObject>("{ \"graphData\": [{ \"Title\": \"Contains Nulls\", \"Monday\": null, \"Tuesday\": null, \"Wednesday\": null, \"Thursday\": null, \"Friday\": null, \"Saturday\": null, \"Sunday\": null, \"Total\": 0 }, { \"Title\": \"Last Row\", \"Monday\": 1, \"Tuesday\": 0, \"Wednesday\": 0, \"Thursday\": 5, \"Friday\": 0, \"Saturday\": 0, \"Sunday\": 0, \"Total\": 6}] }");
}
else
{
res = Newtonsoft.Json.JsonConvert.DeserializeObject<Newtonsoft.Json.Linq.JObject>("{ \"graphData\": [{ \"Title\": \"No Nulls\", \"Monday\": 0, \"Tuesday\": 0, \"Wednesday\": 0, \"Thursday\": 0, \"Friday\": 0, \"Saturday\": 0, \"Sunday\": 0, \"Total\": 0 }, { \"Title\": \"Last Row\", \"Monday\": 1, \"Tuesday\": 0, \"Wednesday\": 0, \"Thursday\": 5, \"Friday\": 0, \"Saturday\": 0, \"Sunday\": 0, \"Total\": 6}] }");
}
Store1.DataSource = (Newtonsoft.Json.Linq.JToken)res["graphData"];
Store1.DataBind();
}
</script>
<!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>XML File Loading</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function TryWithNulls(Store2) {
var json = { 'graphData': [{"Title": "Contains Nulls", "Monday": null, "Tuesday": null, "Wednesday": null, "Thursday": null, "Friday": null, "Saturday": null, "Sunday": null, "Total": 0 }, { "Title": "Last Row", "Monday": 1, "Tuesday": 0, "Wednesday": 0, "Thursday": 5, "Friday": 0, "Saturday": 0, "Sunday": 0, "Total": 6}] };
Store2.loadData(json, false);
Store2.load(Store2.lastOptions);
}
function TryWithoutNulls(Store2) {
var json = { "graphData": [{ "Title": "No Nulls", "Monday": 0, "Tuesday": 0, "Wednesday": 0, "Thursday": 0, "Friday": 0, "Saturday": 0, "Sunday": 0, "Total": 0 }, { "Title": "Last Row", "Monday": 1, "Tuesday": 0, "Wednesday": 0, "Thursday": 5, "Friday": 0, "Saturday": 0, "Sunday": 0, "Total": 6}] };
Store2.loadData(json, false);
Store2.load(Store2.lastOptions);
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store runat="server" ID="Store1" AutoLoad="true" RemotePaging="true">
<AutoLoadParams>
<ext:Parameter Name="Start" Value="0" Mode="Raw"></ext:Parameter>
<ext:Parameter Name="Limit" Value="20" Mode="Raw"></ext:Parameter>
</AutoLoadParams>
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Title" Type="String" />
<ext:RecordField Name="Monday" Type="Int"/>
<ext:RecordField Name="Tuesday" Type="Int"/>
<ext:RecordField Name="Wednesday" Type="Int"/>
<ext:RecordField Name="Thursday" Type="Int"/>
<ext:RecordField Name="Friday" Type="Int"/>
<ext:RecordField Name="Saturday" Type="Int"/>
<ext:RecordField Name="Sunday" Type="Int"/>
<ext:RecordField Name="Total" Type="Int"/>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:GridPanel ID="GridPanel1"
runat="server"
Width="800"
Height="300"
AutoExpandColumn ="Title"
Title="Problem"
Frame="true"
StoreID="Store1">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Title" Header="Title" DataIndex="Title" Width="80"/>
<ext:Column Header="Mon" DataIndex="Monday" Width="80"/>
<ext:Column Header="Tue" DataIndex="Tuesday" Width="80"/>
<ext:Column Header="Wed" DataIndex="Wednesday" Width="80"/>
<ext:Column Header="Thur" DataIndex="Thursday" Width="80" />
<ext:Column Header="Fri" DataIndex="Friday" Width="80" />
<ext:Column Header="Sat" DataIndex="Saturday" Width="80"/>
<ext:Column Header="Sun" DataIndex="Sunday" Width="80"/>
<ext:Column Header="Total" DataIndex="Total" Width="80"/>
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
</ext:GridPanel>
<ext:button ID="Button1" runat="server" Text="With Nulls - Server Side" Icon="Error">
<Listeners>
<Click Handler="window.location ='NullProblem.aspx?WithNulls=true'" />
</Listeners>
</ext:button>
<ext:button ID="Button2" runat="server" Text="Without Nulls - Server Side" Icon="Tick">
<Listeners>
<Click Handler="window.location ='NullProblem.aspx'" />
</Listeners>
</ext:button>
<ext:Store runat="server" ID="Store2" AutoLoad="true" RemotePaging="true">
<AutoLoadParams>
<ext:Parameter Name="Start" Value="0" Mode="Raw"></ext:Parameter>
<ext:Parameter Name="Limit" Value="20" Mode="Raw"></ext:Parameter>
</AutoLoadParams>
<Reader>
<ext:JsonReader Root="graphData">
<Fields>
<ext:RecordField Name="Title" Type="String" />
<ext:RecordField Name="Monday" Type="Int"/>
<ext:RecordField Name="Tuesday" Type="Int"/>
<ext:RecordField Name="Wednesday" Type="Int"/>
<ext:RecordField Name="Thursday" Type="Int"/>
<ext:RecordField Name="Friday" Type="Int"/>
<ext:RecordField Name="Saturday" Type="Int"/>
<ext:RecordField Name="Sunday" Type="Int"/>
<ext:RecordField Name="Total" Type="Int"/>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:GridPanel ID="GridPanel2"
runat="server"
Width="800"
Height="300"
AutoExpandColumn ="Title"
Title="Problem"
Frame="true"
StoreID="Store2">
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column ColumnID="Title" Header="Title" DataIndex="Title" Width="80"/>
<ext:Column Header="Mon" DataIndex="Monday" Width="80"/>
<ext:Column Header="Tue" DataIndex="Tuesday" Width="80"/>
<ext:Column Header="Wed" DataIndex="Wednesday" Width="80"/>
<ext:Column Header="Thur" DataIndex="Thursday" Width="80" />
<ext:Column Header="Fri" DataIndex="Friday" Width="80" />
<ext:Column Header="Sat" DataIndex="Saturday" Width="80"/>
<ext:Column Header="Sun" DataIndex="Sunday" Width="80"/>
<ext:Column Header="Total" DataIndex="Total" Width="80"/>
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
</ext:GridPanel>
<ext:button ID="Button3" runat="server" Text="With Nulls - ClientSide" Icon="Error">
<Listeners>
<Click Handler="TryWithNulls(#{Store2});" />
</Listeners>
</ext:button>
<ext:button ID="Button4" runat="server" Text="Without Nulls - ClientSide" Icon="Tick">
<Listeners>
<Click Handler="TryWithoutNulls(#{Store2});" />
</Listeners>
</ext:button>
</body>
</html>
Last edited by Daniil; Feb 17, 2011 at 5:28 PM.
Reason: [CLOSED]
