Sitefinity Custom Form Widget with Dependent Dropdowns

This blog post provides a sample and tutorial on how to implement a Sitefinity form widget with related dropdowns. Once you select a value from one of the dropdowns, the send dropdown is populated with values depending on the first one. For the sample I have used a list of states.

Here you can download the sample code for the form control. Register the new form widget using Sitefinity Thunder visual studio extension, here is the related documentation on how to register a form control or any other widget using Thunder.

A good approach is to generate the form widget using Thunder and from then on extend the widget implementation to support dependent dropdowns. Here is the documentation on generating form widgets with Thunder.

The template:
The form control with related dropdowns will use two RadComboBox controls on its template, I have chosen RadComboBox instead of ASP.NET DropDownList control because RadComboBox control exposes its own client site API. In the template of the control define two RadComboBox controls, one with an ID of State which is the first ComboBox and the second control with an ID of DependentState to display the info bound to the control once the first RadComboBox value is selected.


The class:
In the Class for the control add references to the RadComboxBoxes that reside in the template:


In InitializeControls method the first RadComboBox is bound to a list of states or another datasource.


In GetScriptDescriptors method the RadComboBoxes are added as ComponentProperty because the control exposes its own API. This way the API will be made available in the client side component of the form widget.


The client side component:
In the JavaScript for the control I have implemented a function _fillStates: function (val) which populates the states in both dropdowns. The two most important functions are get_value and set_value which utilize the API of RadComboBox to save the values of the two RadComboBoxes.