More in this section
Blogs RSS feed

How to implement a drop down list or a radio button list as a meta field

by User Not Found

Since all meta fields are automatically saved and set by Sitefinity, there must be some procedure how Sitefinity can do this automatically. Sitefinity looks for all controls that have id of a meta key and that can be cast to ITextControl interface. The importance of ITextControl interface is that it mandates the control to have a text property, so Sitefinity always knows that the value of meta field will be stored in controls Text property, without actually worrying what kind of a control it is. 


For all controls that implement the ITextControl Interface, such as a label control and controls with a .text property, a software developer can name the ID property after the name of the meta field to bind the data. For controls that do not implement the ITextControl Interface, such as a drop down list, this binding cannot be implemented directly. To overcome this problem, the software developer must add a key to the web.config, create a user control with a drop down list or a radio button list, implement the ITextControl Interface, drag the user control onto a module’s template in the admin, and drag a literal control, for example, onto a module’s public template.


Next, you must create a user control with the drop down list or a radio box. For a drop down list using RadComboBox, here is some sample code:


<fieldset id="ProductTypeWrapper"
<telerik:RadComboBox ID="ProductTypeDropDown" runat="server" Skin="Vista"
<telerik:RadComboBoxItem Text="Product1" Value="Product1" /> 
<telerik:RadComboBoxItem Text="Product2" Value="Product2" /> 
<telerik:RadComboBoxItem Text="Product3" Value="Product3" /> 


In the user control's code behind, implement the ITextControl interface. Bind the text property to the ProductTypeDropDown.SelectedValue property as shown below:


using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
public partial class Files_ProductType : System.Web.UI.UserControl, ITextControl 
    protected void Page_Load(object sender, EventArgs e) 

    #region ITextControl Members 
    public string Text 
            return ProductTypeDropDown.SelectedValue; 
            ProductTypeDropDown.SelectedValue = value; 



Next, you must add a control to the template to add information. As an example, I will open this template:




I switched to design view and I dropped the user control onto the page. I then cut the code, pasted it and added a label. Here is the end result:


<asp:Label ID="lblProductType" runat="server" Text="ProductType" AssociatedControlID="Product_Type"></asp:Label> 
<uc2:ProductType ID="Product_Type" runat="server" /> 



This links the text property of the user control, which I made by implementing the ITextControl interface to the name of the meta field. Now, the binding is complete. When the user edits a product, he or she will have the option of including a product type.


To show the field on the public side, simply add this code to one of the public files. As an example, I will use this one:




Then, add this code (the <P> tags are optional):


<asp:Literal ID="Product_Type" runat="server"></asp:Literal> 


By binding the ID property of a user control implementing the ITextControl interface, you can bind data to controls without a .text property. For more information on meta fields, please read Adding Custom Fields in the User Guide.


Leave a comment
  1. Alexis Lee Feb 17, 2009
    Great article!
    But if my memory serve me right, DropDownList is actually an implementation of ITextControl, so can't see any reason to wrap DropDownList into custom control that implement ITextControl.
  2. Joseph Anderson Mar 16, 2009
    Hi Alexis,

    Thanks for the compliments on my article!

    You are correct that the DropDownList and the CheckBox controls each implement the ITextControl Interface. In this example, however, I want the selected value property to go into the database, not the text property, so that's why I created the user control.

    Leave a comment