EPiServer : CustomProperty for Radio Button List

EPiServer has lots of in-built properties, but one major property that it is missing is ‘radio button list’ , sometimes user wants to select just one option from give 4 or 5 options.

In this post, I will guide you through making a very basic custom property for EPiServer for ‘Radio Button List’

Step1: In your VS project, right-click and new EPiServer custom property control as show below, i will rename this control is ‘PropertyMyPicker’

Step2: Inherit it from ‘PropertyString’ as shown below

Step3: This will create two code files in your project as following

PropertyMyPicker.cs

PropertyMyPickerControl.cs

You do not need to do anything in ‘PropertyMyPicker.cs’ class, and all your logic will be implemented in  ‘PropertyMyPickerControl.cs’.

Step4: In this code snippet,  we create 3 radio buttons, if their value is selected, that text is stored in the database and when the page is re-visited/re-loaded the value is read back from the database. Change the code of the ‘PropertyMyPickerControl.cs’ as shown below and make necessary namespace and variable changes. You have overwrite some of the methods and implement your own if necessary.

/// <summary>
/// PropertyControl implementation used for rendering PropertyMyPicker data.
/// </summary>
public class PropertyMyPickerControl : EPiServer.Web.PropertyControls.PropertyStringControl
{
RadioButton radioButton1 = null;
RadioButton radioButton2 = null;
RadioButton radioButton3 = null;
// Value that will be stored in db,
string desc = string.Empty;
// group name for all radio buttons to make them behave as radiobuttonlist
readonly string groupName = "MyPicker";
/// <summary>
/// Gets the PropertyMyPicker instance for this IPropertyControl.
/// </summary>
/// <value>The property that is to be displayed or edited.</value>
public PropertyMyPicker PropertyMyPicker
{
get
{
return PropertyData as PropertyMyPicker;
}
}
/// <summary>
///creates radio button list and pre-select if the value
///has been saved in database
/// </summary>
public override void CreateEditControls()
{
//add radioButton1 radio button
radioButton1 = new RadioButton();
radioButton1.Text = "Radio 1 Text";
radioButton1.GroupName = groupName;
radioButton1.Checked = IsRadioChecked(radioButton1.Text);
//add radioButton2 radio button
radioButton2 = new RadioButton();
radioButton2.Text = "Radio 2 Text"
radioButton2.GroupName = groupName;
radioButton2.Checked = IsRadioChecked(radioButton2.Text);
//add radioButton3 radio button
radioButton3 = new RadioButton();
radioButton3.Text = "Radio 3 Text";
radioButton3.GroupName = groupName;
radioButton3.Checked = IsRadioChecked(radioButton3.Text);

this.Controls.Add(radioButton1);
this.Controls.Add(radioButton2);
this.Controls.Add(radioButton3);

}
/// <summary>
/// Saves it to the database
/// </summary>
public override void ApplyEditChanges()
{
desc = GetMyDescription();
base.SetValue(desc);
}
/// <summary>
/// Get selected radio button text
/// </summary>
/// <returns></returns>
private string GetMyDescription()
{
string selectedMyPicker = string.Empty;

if (radioButton1.Checked)
selectedMyPicker = "Radio 1 Text";
else if (radioButton2.Checked)
selectedMyPicker = "Radio 2 Text";
else if (radioButton3.Checked)
selectedMyPicker ="Radio 3 Text";

return selectedMy;

}
/// <summary>
/// Check if the controls contain value for any of the radio button in database
/// </summary>
/// <param name="name"></param>
/// <returns></returns>
private bool IsRadioChecked(string name)
{
if (this.PropertyData.Value != null)
{
string selectedMy = this.PropertyData.Value.ToString();
if (selectedMy.ToLower() == name.ToLower())
return true;
}
return false;
}

}

Step 5: Next you need to create the property for the page template, you will see your new property in the dropdown list

Step 6: You can use this property as a page string property and output your custom logic

//assuming MyPicker is the page property name
var myPicker = CurrentPage["MyPicker"] as string;

if (!String.IsNullOrEmpty(myPicker))
{
  //add your custom logic here
}

Thats it, job done!