PDA

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



Timothy
Sep 05, 2008, 5:30 PM
Hello,

This was requested as a feature request, I've decided to post it in bugs so it's easier to track for you guys.

Original discussion: http://forums.ext.net/showthread.php?threadid=1312-17-1.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 void Page_Load(object sender, EventArgs e)
{
BindCountries();
}

public void BindCountries()
{
Countries.DataSource = new object[]
{
new object[]{"AL", "Alabama", "The Heart of Dixie"},
new object[] {"AK", "Alaska", "The Land of the Midnight Sun"},
new object[] {"AZ", "Arizona", "The Grand Canyon State"},
new object[] {"AR", "Arkansas", "The Natural State"},
new object[] {"CA", "California", "The Golden State"},
new object[] {"CO", "Colorado", "The Mountain State"},
new object[] {"CT", "Connecticut", "The Constitution State"},
new object[] {"DE", "Delaware", "The First State"},
new object[] {"DC", "District of Columbia", "The Nation's Capital"},
new object[] {"FL", "Florida", "The Sunshine State"},
new object[] {"GA", "Georgia", "The Peach State"},
new object[] {"HI", "Hawaii", "The Aloha State"},
new object[] {"ID", "Idaho", "Famous Potatoes"},
new object[] {"IL", "Illinois", "The Prairie State"},
new object[] {"IN", "Indiana", "The Hospitality State"},
new object[] {"IA", "Iowa", "The Corn State"},
new object[] {"KS", "Kansas", "The Sunflower State"},
new object[] {"KY", "Kentucky", "The Bluegrass State"},
new object[] {"LA", "Louisiana", "The Bayou State"},
new object[] {"ME", "Maine", "The Pine Tree State"},
new object[] {"MD", "Maryland", "Chesapeake State"},
new object[] {"MA", "Massachusetts", "The Spirit of America"},
new object[] {"MI", "Michigan", "Great Lakes State"},
new object[] {"MN", "Minnesota", "North Star State"},
new object[] {"MS", "Mississippi", "Magnolia State"},
new object[] {"MO", "Missouri", "Show Me State"},
new object[] {"MT", "Montana", "Big Sky Country"},
new object[] {"NE", "Nebraska", "Beef State"},
new object[] {"NV", "Nevada", "Silver State"},
new object[] {"NH", "New Hampshire", "Granite State"},
new object[] {"NJ", "New Jersey", "Garden State"},
new object[] {"NM", "New Mexico", "Land of Enchantment"},
new object[] {"NY", "New York", "Empire State"},
new object[] {"NC", "North Carolina", "First in Freedom"},
new object[] {"ND", "North Dakota", "Peace Garden State"},
new object[] {"OH", "Ohio", "The Heart of it All"},
new object[] {"OK", "Oklahoma", "Oklahoma is OK"},
new object[] {"OR", "Oregon", "Pacific Wonderland"},
new object[] {"PA", "Pennsylvania", "Keystone State"},
new object[] {"RI", "Rhode Island", "Ocean State"},
new object[] {"SC", "South Carolina", "Nothing Could be Finer"},
new object[] {"SD", "South Dakota", "Great Faces, Great Places"},
new object[] {"TN", "Tennessee", "Volunteer State"},
new object[] {"TX", "Texas", "Lone Star State"},
new object[] {"UT", "Utah", "Salt Lake State"},
new object[] {"VT", "Vermont", "Green Mountain State"},
new object[] {"VA", "Virginia", "Mother of States"},
new object[] {"WA", "Washington", "Green Tree State"},
new object[] {"WV", "West Virginia", "Mountain State"},
new object[] {"WI", "Wisconsin", "America's Dairyland"},
new object[] {"WY", "Wyoming", "Like No Place on Earth"}
};

Countries.DataBind();

drpCountry.SelectedItem.Value = "WY";
}

protected void btnTest_Click(object sender, EventArgs e)
{

}
</script>

</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" />

<ExtJS:Store ID="Countries" runat="server" AutoLoad="True">
<Reader>
<ExtJS:ArrayReader ReaderID="Abbrev">
<Fields>
<ExtJS:RecordField Name="Abbrev" />
<ExtJS:RecordField Name="DisplayName" />
</Fields>
</ExtJS:ArrayReader>
</Reader>
</ExtJS:Store>
<ExtJS:ComboBox ID="drpCountry" runat="server" StoreID="Countries" DisplayField="DisplayName" ValueField="Abbrev" Editable="False" EmptyText="----" ForceSelection="True" Mode="Local" TypeAhead="False" Select&#111;nfocus="True" Stateful="True" TriggerAction="All" Width="255" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="drpCountry" ErrorMessage="Country is a required field" ValidationGroup="vsCustomer" Display="Dynamic">!</asp:RequiredFieldValidator>
<asp:Label ID="lblSelected" runat="server" Text="" />
<ExtJS:Button runat="server" AutoPostBack="True" &#111;nclick="btnTest_Click" Text="Submit" CausesValidation="True" ValidationGroup="vsCustomer" />
</form>
</body>
</html>


The above code is an example on how 2 things are not working:

1. Client-side validation is not running IE6 and FF3.0; server-side only
2. When rendering for the first time, it automatically selects an item from the list but clicking submit generates a validation message

Cheers,
Timothy

geoffrey.mcgill
Sep 06, 2008, 6:33 PM
Hi Timothy,

Both #1 and #2 should be working properly now. 


Code has been committed to svn.



I also did some more testing with the <ext:ComboBox> and I'm not really happy with how the .SelectedItem property/feature is working. We're going to do some more work on this over the coming days. 

Timothy
Sep 07, 2008, 2:16 PM
Hello Geoffrey,

I'm not sure if your update has caused the following, but check this out in FF3.0:



<%@ 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">
<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" />
<ext:ScriptManager ID="ScriptManager2" runat="server" StateProvider="PostBack" />
<p><a href="Example.aspx">Reload</a></p>
<ext:TabPanel ID="Tabs1" runat="server" ActiveTabIndex="1" AutoPostBack="True" AutoHeight="True" AutoWidth="True" DeferredRender="True">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Tab1" AutoHeight="True" AutoWidth="True">
<Content>
<ExtJS:ComboBox ID="drpComboBox" runat="server" Editable="False" ForceSelection="True" Mode="Local" Select&#111;nfocus="True" TypeAhead="True" Width="255">
<SelectedItem Text="Customer" Value="Customer" />
<Items>
<ExtJS:ListItem Text="Customer" Value="Customer" />
<ExtJS:ListItem Text="Employee" Value="Employee" />
</Items>
</ExtJS:ComboBox>
<asp:RequiredFieldValidator ID="rfvComboBox" runat="server" ControlToValidate="drpComboBox" Display="Dynamic">!</asp:RequiredFieldValidator>
</Content>
</ext:Tab>
<ext:Tab ID="Tab2" runat="server" Title="Tab2" AutoHeight="True" AutoWidth="True">
<Content>
Tab 2
</Content>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</form>
</body>
</html>


Replication steps:

1. Load page
2. Check your FF Error Console and you'll see:



Error: rfvComboBox is not defined
Source File: http://localhost/Example/Example.aspx
Line: 17


This was not happening prior to yesterday :)

Cheers,
Timothy

Timothy
Sep 07, 2008, 3:04 PM
Was able to fix the above by doing the following:

Update ScriptManager.cs(SweepControls):


protected override void SweepControls(WebControl item)
{
base.SweepControls(item);

this.SetUpdatePanels(ControlUtils.FindControl(this .Page.Form, this.TriggerUpdatePanelID));
}


Update ScriptManager.cs(Render):


protected override void Render(HtmlTextWriter writer)
{
base.Render(writer);

if (this.StateProvider == StateProvider.PostBack)
{
this.Page.ClientScript.RegisterForEventValidation( this.UniqueID);
}

if (!this.hasRendered &amp;&amp; this.IsNeedRender)
{
if (!Ext.IsAjaxRequest)
{
if (!Ext.IsAjaxRequest &amp;&amp; !this.isValidationFixRegistered)
{
if (this.Page.Form != null)
{
List<BaseValidator> validators = ControlUtils.FindAllControls<BaseValidator>(this.Page.Form);

foreach (BaseValidator validator in validators)
{
if (validator.Enabled &amp;&amp; validator.Visible)
{
if (ControlUtils.FindControl(this, validator.ControlToValidate) as WebControl != null)
{
this.AddScript(string.Concat(validator.ClientID, ".enabled=true;"));
this.isValidationFixRegistered = true;
}
}
}

if (this.isValidationFixRegistered)
{
this.AddScript("window.ValidatorOnLoad();");
}
}
}

writer.Write(this.BuildAll());
}
else
{
HttpResponse response = HttpContext.Current.Response;

// Used to catch Response.Redirect() during a callback. If it is a redirect
// the response is converted back into a normal response and the appropriate
// javascript is returned to redirect the client.
if (Ext.IsAjaxRequest &amp;&amp; response.StatusCode == 302)
{
string href = response.RedirectLocation.Replace("\\", "\\\\").Replace("'", "\\'");
response.RedirectLocation = string.Empty;
response.Clear();
response.StatusCode = 200;
this.RegisterClientScriptBlock("redirect", "window.location='" + href + "';");
}

writer.Write("<CooliteAjaxRequest>");
writer.Write(this.BuildScriptBlock(false));
writer.Write("</CooliteAjaxRequest>");
}
}
}


The Validation fix that was checked in is happening too early when SweepControls is being called to account for the TabPanel visibility; also it was not checking the visibility but only the enabled, so I've also added validator.Visible to the condition.

I'm sure you'll find a better way to implement this fix then what I have done.

Cheers,
Timothy