I'm probably missing something in configuration because it doesn't work properly for me. When I start typing in the details combobox, the first item pops up every time event after clearing the input string. Please refer to the code sample, I do apologize for its length.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.StoreMaster.DataSource = this.MasterData();
this.StoreMaster.DataBind();
}
}
private System.Data.DataTable MasterData()
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.Add(new System.Data.DataColumn("MasterId", Type.GetType("System.Int32")));
dt.Columns.Add(new System.Data.DataColumn("MasterDesc", Type.GetType("System.String")));
System.Data.DataRow dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 0;
dr[1] = "No Items";
dr.EndEdit();
dt.Rows.Add(dr);
dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 1;
dr[1] = "Single Item";
dr.EndEdit();
dt.Rows.Add(dr);
dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 2;
dr[1] = "Several Items (Mandatory)";
dr.EndEdit();
dt.Rows.Add(dr);
dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 3;
dr[1] = "Several Items (Optional)";
dr.EndEdit();
dt.Rows.Add(dr);
return dt;
}
private System.Data.DataTable DetailsData(int masterId)
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.Add(new System.Data.DataColumn("DetailsId", Type.GetType("System.Int32")));
dt.Columns.Add(new System.Data.DataColumn("DetailsDesc", Type.GetType("System.String")));
switch (masterId)
{
case 0:
return dt;
case 1:
System.Data.DataRow dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 1;
dr[1] = "Canada";
dr.EndEdit();
dt.Rows.Add(dr);
return dt;
case 2:
dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 1;
dr[1] = "Canada";
dr.EndEdit();
dt.Rows.Add(dr);
dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 2;
dr[1] = "United States";
dr.EndEdit();
dt.Rows.Add(dr);
dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 3;
dr[1] = "France";
dr.EndEdit();
dt.Rows.Add(dr);
dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 4;
dr[1] = "Germany";
dr.EndEdit();
dt.Rows.Add(dr);
dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 5;
dr[1] = "Poland";
dr.EndEdit();
dt.Rows.Add(dr);
return dt;
case 3:
dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 1;
dr[1] = "Canada";
dr.EndEdit();
dt.Rows.Add(dr);
dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 2;
dr[1] = "United States";
dr.EndEdit();
dt.Rows.Add(dr);
dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 3;
dr[1] = "France";
dr.EndEdit();
dt.Rows.Add(dr);
dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 4;
dr[1] = "Germany";
dr.EndEdit();
dt.Rows.Add(dr);
dr = dt.NewRow();
dr.BeginEdit();
dr[0] = 5;
dr[1] = "Poland";
dr.EndEdit();
dt.Rows.Add(dr);
return dt;
default:
break;
};
return dt;
}
protected void ComboMaster_Select(object sender, DirectEventArgs e)
{
int masterId = Convert.ToInt32(e.ExtraParams["MasterId"]);
this.StoreDetails.DataSource = this.DetailsData(masterId);
this.StoreDetails.DataBind();
switch (masterId)
{
case 0:
this.ComboDetails.Disabled = true;
SetEmptyText(false);
SetAllowBlank(true);
break;
case 1:
this.ComboDetails.Disabled = false;
SetEmptyText(true);
SetAllowBlank(false);
this.ComboDetails.SelectedIndex = 0;
break;
case 2:
this.ComboDetails.Disabled = false;
SetEmptyText(true);
SetAllowBlank(false);
break;
case 3:
this.ComboDetails.Disabled = false;
SetEmptyText(true);
SetAllowBlank(true);
break;
default:
break;
};
}
private void SetEmptyText(bool setEmptyText)
{
if (setEmptyText)
{
this.ComboDetails.EmptyText = "Select Details Item...";
this.ComboDetails.ClearValue();
}
else
{
this.ComboDetails.EmptyText = null;
this.ComboDetails.Call("el.removeClass", "x-form-empty-field");
this.ComboDetails.ClearValue();
}
}
private void SetAllowBlank(bool allowBlank)
{
if (allowBlank)
{
this.ComboDetails.AllowBlank = true;
this.ComboDetails.Call("validate");
}
else
{
this.ComboDetails.AllowBlank = false;
}
}
</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>Simple Array Grid - Ext.NET Examples</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>
Master - Details Comboboxes</h1>
<ext:FormPanel runat="server">
<Items>
<ext:ComboBox ID="ComboMaster" runat="server" DisplayField="MasterDesc" ValueField="MasterId"
Editable="false" TypeAhead="true" SelectOnFocus="true" EmptyText="Select Master Item..."
AllowBlank="false" Width="270">
<Store>
<ext:Store ID="StoreMaster" AutoLoad="true" runat="server">
<SortInfo Field="MasterDesc" Direction="ASC" />
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="MasterId" />
<ext:RecordField Name="MasterDesc" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<DirectEvents>
<Select OnEvent="ComboMaster_Select">
<ExtraParams>
<ext:Parameter Name="MasterId" Value="record.data['MasterId']" Mode="Raw">
</ext:Parameter>
</ExtraParams>
<EventMask ShowMask="true" />
</Select>
</DirectEvents>
</ext:ComboBox>
<ext:ComboBox runat="server" ID="ComboDetails" DisplayField="DetailsDesc" ValueField="DetailsId"
Editable="true" TypeAhead="true" MinChars="2" SelectOnFocus="true" Disabled="true"
AllowBlank="false" Width="270">
<Store>
<ext:Store ID="StoreDetails" AutoLoad="true" runat="server">
<SortInfo Field="DetailsDesc" Direction="ASC" />
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="DetailsId" />
<ext:RecordField Name="DetailsDesc" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
</ext:ComboBox>
</Items>
</ext:FormPanel>
</body>
</html>
Thanks,
Vadym
