Introduction
Sometime we have a requirement to show the cascading dropdowns. Like depend upon the selection of the first combo-box, you have to hide/show another combo-box. You can implement it using the EXT.Net DirectEvent.
Background
This solution helps EXT.Net developer to create the cascading combo.
Using the code
Assume that there is a requirement that says the fields should be organized in a hierarchy whereby the answer to the parent question should determine if the child questions are visible in the form view.
e.g. if "Combo-box1" is set to "Yes", then another child fields "Combo-box2"would become visible. If No was selected, they 2nd one would be hidden.
<ext:ComboBox FieldLabel="Combo-box1" AutoCompleteType="Disabled"
runat="server" Hidden="true" ID="ddlCombobox1" dataType="Boolean">
<DirectEvents>
<Select OnEvent="ddlCombobox1_ItemSelected">
</Select>
</DirectEvents>
</ext:ComboBox>
<ext:ComboBox FieldLabel="Combo-box2" AutoCompleteType="Disabled"
runat="server" Hidden="true" ID="ddlCombobox2" dataType="Boolean">
</ext:ComboBox>
The above code snippet illustrate that there are two drop-down ddlCombobox1 and ddlCombobox2. ddlCombobox1 has a DirectEvents for Select event.
<DirectEvents>
<Select OnEvent="ddlCombobox_ItemSelected">
</Select>
</DirectEvents>
You can handel the event at code behind side as below.
protected void ddlCombobox1_ItemSelected(object sender, Ext.Net.DirectEventArgs e)
{
string selectedText = ddlCombobox1.SelectedItem.Text;
if (selectedText == "No")
{
ddlCombobox2.SetValueAndFireSelect(0);
ddlAccessGroundDisturbance.Hidden = true;
...
}
else
{
ddlCombobox2.Hidden = false;
...
}
}
You may have to deal with the codebehind depend upon your page life cycle and events and you are done.
Thanks
Conclusion
This solution helps EXT.Net developer to create the cascading combo.