Nov 21, 2014, 5:24 AM
Not being able to bind another combobox on selected index changed of a combobox.
I have 2 comboboxes. On selected index change of one combobox I want to bind the next combobox. Please check the code below and let me know where am i going wrong.
On selected index changed of the first combo :
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.ComboBox1.GetStore();
store.DataSource = new object[]
{
new object[] { "1", "--Select Maturity--", "black","white" },
new object[] { "2", "Gaps", "white","red" },
new object[] { "3", "Disconnects", "white","pink" },
new object[] { "4", "Actions", "black","yellow" },
new object[] { "5", "In Place", "black","lightgreen" },
new object[] { "6", "Proven", "white","green" },
new object[] { "7", "N/A", "black","lightgray" }
};
}
}
</script>
<style type="text/css">
.x-form-text {
background: none !important;
background-image: none !important;
/*color: white !important;*/
font-weight: bold !important;
text-align: center !important;
}
</style>
<ext:XScript ID="XScriptdd1" runat="server">
<script type="text/javascript">
var applyFilter = function (field) {
var MaturityHealth = field.value;
if (MaturityHealth == '1') {//-->Gaps - Red.
field.el.dom.style.color = "white !important";
field.el.dom.style.textAlign = "center";
field.el.dom.style.backgroundColor = "#FF0000";
field.el.dom.style.backgroundImage = "none";
}
else if (MaturityHealth == '2') {//-->Disconnect - LightRed.
field.el.dom.style.color = "white";
field.el.set().dom.style.background = "#FF8080";
field.el.dom.style.backgroundColor = "#FF8080";
//field.el.dom.style.backgroundImage = "none";
}
else if (MaturityHealth == '3') {//-->Actions - Yellow
field.el.dom.style.color = "black";
field.el.set().dom.style.backgroundColor = "black"; //field.el.dom.style.backgroundColor = "#FFFF00";
field.el.dom.style.backgroundImage = "none";
}
else if (MaturityHealth == '4') {//-->In Place - LightGreen
field.el.dom.style.color = "black";
field.el.dom.style.backgroundColor = "#C2FFA3";
field.el.dom.style.backgroundImage = "none";
}
else if (MaturityHealth == '5') {//-->Proven - Green
field.el.dom.style.color = "white";
field.el.dom.style.backgroundColor = "#008000";
field.el.dom.style.backgroundImage = "none";
}
else if (MaturityHealth == '6') {//-->N/A - Grey
field.el.dom.style.color = "black";
field.el.dom.style.backgroundColor = "#d4d0c8";
field.el.dom.style.backgroundImage = "none";
}
else {
field.el.dom.style.color = "white";
field.el.dom.style.backgroundColor = "white";
field.el.dom.style.backgroundImage = "none";
}
field.el.dom.style.fontWeight = "bold";
};
</script>
</ext:XScript>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="" />
<ext:Store ID="Store3" runat="server">
<Model>
<ext:Model ID="Model3" runat="server">
<Fields>
<ext:ModelField Name="value" />
<ext:ModelField Name="text" />
<ext:ModelField Name="color" />
<ext:ModelField Name="bgcolor" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Store ID="Store4" runat="server">
<Model>
<ext:Model ID="Model4" runat="server">
<Fields>
<ext:ModelField Name="value" />
<ext:ModelField Name="text" />
<ext:ModelField Name="color" />
<ext:ModelField Name="bgcolor" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:ComboBox
ID="ComboBox1"
runat="server"
DisplayField="text"
ValueField="value">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="value" />
<ext:ModelField Name="text" />
<ext:ModelField Name="color" />
<ext:ModelField Name="bgcolor" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
<Listeners>
<Select Handler="applyFilter(this)" />
<AfterRender Handler="applyFilter(this)" />
</Listeners>
<ListConfig>
<Tpl ID="Tpl1" runat="server">
<Html>
<ul class="x-list-plain">
<tpl for=".">
<li role="option" class="x-boundlist-item" style="font-weight:bold; text-align:center; background-color:{bgcolor}; color:{color}">
{text}
</li>
</tpl>
</ul>
</Html>
</Tpl>
</ListConfig>
<DirectEvents>
<Select OnEvent="ddlTier3_SelectedIndexChanged">
</Select>
</DirectEvents>
</ext:ComboBox>
<ext:ComboBox
ID="ComboBox4"
runat="server"
DisplayField="text"
ValueField="value" Selectable="true" StoreID="Store4">
<Listeners>
<Select Handler="applyFilter(this)" />
<AfterRender Handler="applyFilter(this)" />
</Listeners>
<ListConfig>
<Tpl ID="Tpl3" runat="server">
<Html>
<ul class="x-list-plain">
<tpl for=".">
<li role="option" class="x-boundlist-item" style="font-weight:bold; text-align:center; background-color:{bgcolor}; color:{color}">
{text}
</li>
</tpl>
</ul>
</Html>
</Tpl>
</ListConfig>
</ext:ComboBox>
</form>
</body>
</html>
On selected index changed of the first combo :
protected void ddlTier3_SelectedIndexChanged(object sender, DirectEventArgs e)
{
try
{
Store strNew = ComboBox4.GetStore();
strNew.DataSource = new object[]
{
new object[] { "1", "--Select Maturity--", "black","white" },
new object[] { "2", "Gaps", "white","red" },
new object[] { "3", "Disconnects", "white","pink" },
new object[] { "4", "Actions", "black","yellow" },
new object[] { "5", "In Place", "black","lightgreen" },
new object[] { "6", "Proven", "white","green" },
new object[] { "7", "N/A", "black","lightgray" }
};
strNew.DataBind();
}
catch
{
throw;
}
}