Telerik Multi Column RadComboBox from Code / Inside a Composite Control

I wanted to create a multicolumn combo box using the Telerik RadComboBox control as per this example:

To build this in a code you need to set the HeaderTemplate and ItemTemplate of the RadComboBox in your CreateChildControls method

RadComboBox1.HeaderTemplate = new MyItemTemplate (ListItemType.Header);
RadComboBox1.ItemTemplate = new MyItemTemplate (ListItemType.Item);
RadComboBox1.FooterTemplate = new MyItemTemplate (ListItemType.Footer);</div>
RadComboBox1.ItemDataBound +=new RadComboBoxItemEventHandler(RadComboBox1_ItemDataBound);</div>

You then have to Implement the ItemDataBound event on the RadComboBox in order to set the selection behavior.

    protected void RadComboBox1_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
        BusinessObject businessObject = (BusinessObject)e.Item.DataItem;

        e.Item.Text = businessObject.GroupCode;
        e.Item.Value = businessObject.GroupCode;

Now you just have to implement the ITemplate class. In this example we are creating a three column header, as well as a three column item with binding,

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Telerik.Web.UI;

public class MyItemTemplate : System.Web.UI.ITemplate

    System.Web.UI.WebControls.ListItemType templateType;

    public MyItemTemplate(System.Web.UI.WebControls.ListItemType type)
        templateType = type;

    public void InstantiateIn(System.Web.UI.Control container)
        PlaceHolder ph = new PlaceHolder();
        Label item1 = new Label();
        Label item2 = new Label();
        Label item3 = new Label();
        item1.ID = "item1";
        item2.ID = "item2";
        item3.ID = "item3";

        switch (templateType)
            case ListItemType.Header:
                ph.Controls.Add(new LiteralControl("<ul><li class='col1'>Code</li><li class='col2'>Description</li><li class='col3'>Type</li></ul>"));
            case ListItemType.Item:
                ph.Controls.Add(new LiteralControl("<ul><li class='col1'>"));
                ph.Controls.Add(new LiteralControl("</li><li class='col2'>"));
                ph.Controls.Add(new LiteralControl("</li><li class='col3'>"));
                ph.Controls.Add(new LiteralControl("</li></ul>"));
                ph.DataBinding += new EventHandler(Item_DataBinding);

    static void Item_DataBinding(object sender, System.EventArgs e)
        PlaceHolder ph = (PlaceHolder)sender;
        RadComboBoxItem ri = (RadComboBoxItem)ph.NamingContainer;
        String item1Value = (String)DataBinder.Eval(ri.DataItem, "GroupCode");
        String item2Value = (String)DataBinder.Eval(ri.DataItem, "GroupDescription");
        String item3Value = (String)DataBinder.Eval(ri.DataItem, "GroupTypeCode");
        ((Label)ph.FindControl("item1")).Text = item1Value;
        ((Label)ph.FindControl("item2")).Text = item2Value;
        ((Label)ph.FindControl("item3")).Text = item3Value;

CSS Styling

I have followed the Telerik CSS example to make the columns work:

.rcbHeader ul,
.rcbFooter ul,
.rcbItem ul, .rcbHovered ul, .rcbDisabled ul
    width: 100%;
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style-type: none;

.col1, .col2, .col3
    float: left;
    width: 110px;
    margin: 0;
    padding: 0 5px 0 0;
    line-height: 14px;

Data Binding Notes

You should make sure that CreateChildControls is run before you bind the data. I have used the EnsureChildControls() method for this.

        public List<BusinessObject> BusinessObjects
                RadComboBox1.DataSource = value;

3 thoughts on “Telerik Multi Column RadComboBox from Code / Inside a Composite Control

  1. Where is the class BusinessObject public List BusinessObjects
    RadComboBox1.DataSource = value;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s