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:

http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multicolumncombo/defaultcs.aspx

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>"));
                break;
            case ListItemType.Item:
                ph.Controls.Add(new LiteralControl("<ul><li class='col1'>"));
                ph.Controls.Add(item1);
                ph.Controls.Add(new LiteralControl("</li><li class='col2'>"));
                ph.Controls.Add(item2);
                ph.Controls.Add(new LiteralControl("</li><li class='col3'>"));
                ph.Controls.Add(item3);
                ph.Controls.Add(new LiteralControl("</li></ul>"));
                ph.DataBinding += new EventHandler(Item_DataBinding);
                break;
        }
        container.Controls.Add(ph);
    }

    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.

http://msdn.microsoft.com/en-us/library/19ckw0e5(vs.71).aspx

        public List<BusinessObject> BusinessObjects
        {
             set
            {
                EnsureChildControls();
                RadComboBox1.DataSource = value;
                RadComboBox1.DataBind();
            }
        }
Advertisements

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

  1. Where is the class BusinessObject public List BusinessObjects
    {
    set
    {
    EnsureChildControls();
    RadComboBox1.DataSource = value;
    RadComboBox1.DataBind();
    }
    }

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s