The implementation of two comboboxes in designer in Sitefinity CMS is an easy task. The bigger challenge is to "link" them and populate one depending on the other's value.
In this sample I have generated a ready-to-use widget with designer with Sitefinity Thunder Extension for Visual Studio. Thunder wires up everything for me, creates a simple designer with a messagebox.
First thing I do is to add two properties to hold my dropdown values in the control class:
Then in the designer template I add the dropdowns:
In the designer class I define two properties to access the dropdowns from the designer template:
I also add two new component properies in ScriptDescriptors:
The last thing to do is implement the JavaScript logic to populate the dropdowns. I considered for this sample to define a jagged array, holding on each row as a first value my main dropdown item and as a second value an array for my dependent dropdown:
We need to hook up a selectedIndexChanged event to our main dropdown which will fire every time the dropdown changes its value:
The rest is basic JavaScript which could be implemented in multiple ways.
Here you can download the complete sample: download
In this sample I have generated a ready-to-use widget with designer with Sitefinity Thunder Extension for Visual Studio. Thunder wires up everything for me, creates a simple designer with a messagebox.
First thing I do is to add two properties to hold my dropdown values in the control class:
/// <summary>
/// Gets or sets the first dropdown that will be displayed.
/// </summary>
public
string
FirstDDValue {
get
;
set
; }
/// <summary>
/// Gets or sets the second dropdown that will be displayed.
/// </summary>
public
string
SecondDDValue {
get
;
set
; }
Then in the designer template I add the dropdowns:
<
telerik:RadComboBox
ID
=
"MainDropDown"
CssClass
=
"sfTxt"
runat
=
"server"
>
</
telerik:RadComboBox
>
<
hr
/>
<
telerik:RadComboBox
ID
=
"DependantDropDown"
CssClass
=
"sfTxt"
runat
=
"server"
>
</
telerik:RadComboBox
>
In the designer class I define two properties to access the dropdowns from the designer template:
/// <summary>
/// Gets the control that is bound to the MainDropDown property
/// </summary>
protected
RadComboBox MainDropDown
{
get
{
return
this
.Container.GetControl<RadComboBox>(
"MainDropDown"
,
true
);
}
}
/// <summary>
/// Gets the control that is bound to the DependantDropDown property
/// </summary>
protected
RadComboBox DependantDropDown
{
get
{
return
this
.Container.GetControl<RadComboBox>(
"DependantDropDown"
,
true
);
}
}
I also add two new component properies in ScriptDescriptors:
/// <summary>
/// Gets a collection of script descriptors that represent ECMAScript (JavaScript) client components.
/// </summary>
public
override
System.Collections.Generic.IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors()
{
var scriptDescriptors =
new
List<ScriptDescriptor>(
base
.GetScriptDescriptors());
var descriptor = (ScriptControlDescriptor)scriptDescriptors.Last();
descriptor.AddElementProperty(
"message"
,
this
.Message.ClientID);
descriptor.AddComponentProperty(
"dropdown"
,
this
.MainDropDown.ClientID);
descriptor.AddComponentProperty(
"dropdownDependant"
,
this
.DependantDropDown.ClientID);
return
scriptDescriptors;
}
The last thing to do is implement the JavaScript logic to populate the dropdowns. I considered for this sample to define a jagged array, holding on each row as a first value my main dropdown item and as a second value an array for my dependent dropdown:
var
ItemsList = {
"1"
: [
"1.1"
,
"1.2"
,
"1.3"
],
"2"
: [
"2.1"
,
"2.2"
,
"2.3"
],
"3"
: [
"3.1"
,
"3.2"
,
"3.3"
],
"4"
: [
"4.1"
,
"4.2"
,
"4.3"
],
}
We need to hook up a selectedIndexChanged event to our main dropdown which will fire every time the dropdown changes its value:
initialize:
function
() {
/* Here you can attach to events or do other initialization */
SitefinityWebApp.RelatedComboBoxes.Designer.RelatedComboBoxesDesigner.callBaseMethod(
this
,
'initialize'
);
this
._MainDropdownChangedDelegate = Function.createDelegate(
this
,
this
._mainDropDownChangedHandler);
this
.get_dropdown().add_selectedIndexChanged(
this
._MainDropdownChangedDelegate);
},
The rest is basic JavaScript which could be implemented in multiple ways.
Here you can download the complete sample: download