EXT.Net - Working with Cascading Dropdown

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.

/// <summary>
/// Direct Event for ddlCombobox1
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
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.