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

December 29, 2008 Digital Experience

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"
<Items> 
<telerik:RadComboBoxItem Text="Product1" Value="Product1" /> 
<telerik:RadComboBoxItem Text="Product2" Value="Product2" /> 
<telerik:RadComboBoxItem Text="Product3" Value="Product3" /> 
</Items> 
</telerik:RadComboBox> 
</fieldset> 
 

 



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 
    { 
        get 
        { 
            return ProductTypeDropDown.SelectedValue; 
        } 
        set 
        { 
            ProductTypeDropDown.SelectedValue = value; 
        } 
    } 

    #endregion 
 

 

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

 

~\Sitefinity\Admin\ControlTemplates\Products\ControlPanelEdit.ascx

 

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:

 

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

  

 

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:

 

~\Sitefinity\ControlTemplates\Products\ContentViewSingleItem.ascx

 

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

 

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

 

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.

The Progress Team