PDA

View Full Version : [FIXED] [V0.6] GridPanel and ComboBox



Timothy
Sep 17, 2008, 8:21 PM
Hello,

I've decided to start this as a new posting so it can be easily tracked. I'm getting an AjaxEvent exception with the following 2 pages:

Example.aspx:


<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected override void OnInit(EventArgs e)
{
Control control = Page.LoadControl("Example-Controls.ascx");

UserControl.Controls.Add(control);

base.OnInit(e);
}
protected void Page_Load(object sender, EventArgs e)
{
Permissions.DataSource = new object[]
{
new object[] {"Word"}
};
Permissions.DataBind();
}
protected void drpAccountType_Change(object sender, AjaxEventArgs e)
{

}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<p><a href="Example.aspx">Reload</a></p>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
<ext:ScriptManager ID="ScriptManager2" runat="server" Theme="Gray" />
<ext:Store ID="Permissions"
runat="server"
AutoLoad="True"
GroupField="GroupingName" IgnoreExtraFields="True">
<Reader>
<ext:JsonReader ReaderID="PermissionId">
<Fields>
<ext:RecordField Name="DisplayName" />
</Fields>
</ext:JsonReader>
</Reader>
<SortInfo Field="DisplayName" />
</ext:Store>
<ext:GridPanel ID="dgPermission"
runat="server"
StoreID="Permissions"
AutoExpandColumn="DisplayName"
Border="False"
HideHeaders="True"
StripeRows="True">
<ColumnModel>
<Columns>
<ext:Column ColumnID="DisplayName" DataIndex="DisplayName" />
</Columns>
</ColumnModel>
</ext:GridPanel>
<asp:PlaceHolder ID="UserControl" runat="server" />
</form>
</body>
</html>


Example-Controls.ascx:


<%@ Control Language="C#" ClassName="Example_Control" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

}
protected void txtTest_Change(object sender, AjaxEventArgs e)
{

}
protected void drpAccountType_Change(object sender, AjaxEventArgs e)
{
txtTest.Text = "Word";
}
</script>
<ExtJS:FieldSet ID="pnlAccount" runat="server" Title="Account Information">
<Content>
<table cellpadding="5" cellspacing="5" border="0" width="100%">
<tr>
<td>
<asp:PlaceHolder
<ext:TextField ID="txtTest" runat="server">
<AjaxEvents>
<Change OnEvent="txtTest_Change" />
</AjaxEvents>
</ext:TextField>

<ext:ComboBox ID="drpAccountType" runat="server"
Editable="False" ForceSelection="True" Mode="Local"
Select&#111;nfocus="True" TypeAhead="True" Width="255">
<AjaxEvents>
<Change OnEvent="drpAccountType_Change" />
</AjaxEvents>
<SelectedItem Text="Customer" Value="Customer" />
<Items>
<ext:ListItem Text="Customer" Value="Customer" />
<ext:ListItem Text="Employee" Value="Employee" />
</Items>
</ext:ComboBox>
</td>
</tr>
</table>
</Content>
</ExtJS:FieldSet>


Replication steps:

1. Load page
2. Change the combo box value
3. Notice exception

4. Remove GridPanel
5. Reload page
6. Change the combo box value
7. Works

Cheers,
Timothy

Vladimir
Sep 18, 2008, 3:59 AM
Hi Timothy,

I found few strange moments in your code. For me your original example throw js error on page loading

<ul> you binding an array but use JsonReader (i changed to ArrayReader) you set GroupField to unexisting field (i removed it) you set ReaderID to unexisting field (i removed it) in your user control found '<asp:PlaceHolder' string (before txtTest TextField) which break markup syntax (removed it)[/list]I recommend set an ID property for user control (in which using AjaxEvent) immediately after its creation (or in the markup if the control is static). The reasons for it: if you don't set the ID for user control then the ID property will be set at PreRender step. When an AjaxEvent performs on server side the ScriptManager try to find a control but ID for User Control doesn't set yet and an exception occurs

Your changed code which works for me fine (please pay attention that the Change event occurs when a control loose focus, i forgot about this and was surprised that event didn't fire :) )

Example.aspx:


<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected override void OnInit(EventArgs e)
{
base.OnInit(e);

Control control = Page.LoadControl("Example-Controls.ascx");
control.ID = "UC1";

UserControl.Controls.Add(control);
}

protected void Page_Load(object sender, EventArgs e)
{
Permissions.DataSource = new object[]
{
new object[] {"Word"}
};
Permissions.DataBind();
}
protected void drpAccountType_Change(object sender, AjaxEventArgs e)
{

}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
<ext:ScriptManager ID="ScriptManager2" runat="server" Theme="Gray" />
<ext:Store ID="Permissions" runat="server" AutoLoad="True"
IgnoreExtraFields="True">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="DisplayName" />
</Fields>
</ext:ArrayReader>
</Reader>
<SortInfo Field="DisplayName" />
</ext:Store>
<ext:GridPanel ID="dgPermission" runat="server" StoreID="Permissions" AutoExpandColumn="DisplayName"
Border="False" HideHeaders="True" StripeRows="True">
<ColumnModel>
<Columns>
<ext:Column ColumnID="DisplayName" DataIndex="DisplayName" />
</Columns>
</ColumnModel>
</ext:GridPanel>
<asp:PlaceHolder ID="UserControl" runat="server" />
</form>
</body>
</html>



Example-Controls.ascx:


<%@ Control Language="C#" ClassName="Example_Control" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

}
protected void txtTest_Change(object sender, AjaxEventArgs e)
{

}
protected void drpAccountType_Change(object sender, AjaxEventArgs e)
{
txtTest.Text = "Word";
}
</script>

<ext:FieldSet ID="pnlAccount" runat="server" Title="Account Information">
<Content>
<table cellpadding="5" cellspacing="5" border="0" width="100%">
<tr>
<td>
<ext:TextField ID="txtTest" runat="server">
<AjaxEvents>
<Change OnEvent="txtTest_Change" />
</AjaxEvents>
</ext:TextField>
<ext:ComboBox ID="drpAccountType" runat="server" Editable="False" ForceSelection="True"
Mode="Local" Select&#111;nfocus="True" TypeAhead="True" Width="255">
<AjaxEvents>
<Change OnEvent="drpAccountType_Change" />
</AjaxEvents>
<SelectedItem Text="Customer" Value="Customer" />
<Items>
<ext:ListItem Text="Customer" Value="Customer" />
<ext:ListItem Text="Employee" Value="Employee" />
</Items>
</ext:ComboBox>
</td>
</tr>
</table>
</Content>
</ext:FieldSet>

geoffrey.mcgill
Sep 18, 2008, 8:18 AM
Setting the UserControl .ID does avoid the exception, but I do feel there is a bug in there somewhere. If you comment out the <ext:GridPanel>, the exception is thrown again... which should not be happening. 

I am investigating.

Timothy
Sep 18, 2008, 9:01 AM
Thanks for the comments guys, sorry about the original example, it was a real cut and paste from my original solution, so I'm not surprised it looks so hacked and slashed :)

I'm going to try the ID of the UserControl and see how far that gets me in my solution.

Cheers,
Timothy

geoffrey.mcgill
Sep 18, 2008, 8:20 PM
Hi Timothy,

We just committed some changes that removes the requirement to explicitly set the .ID on UserControl. Of course you can still set (and it's still recommended), but with the latest code, the AjaxEvents will work properly if the UserControl .ID is explicitly set or not.


Hope this helps.

Timothy
Sep 18, 2008, 8:27 PM
Awesome!

Cheers,
Timothy