Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > ComboBox > Dynamic Multi-Column Template

Not answered Dynamic Multi-Column Template

Feed from this thread
  • Telerik Admin Master avatar

    Posted on Jul 27, 2010 (permalink)

    Requirements
    RadControls version

    RadComboBox for ASP.NET AJAX
    .NET version

    2.0+
    Visual Studio version VS 2005/2008/2010
    programming language

    C#/VB.NET
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    This project demonstrates how to create a multi-column RadComboBox control dynamically at runtime.

    There are two easy steps that you need to follow:

        1. First add RadComboBox dynamically in the Page.OnInit event handler.
        2. Then set the ItemTemplate and HeaderTemplate properties to a new instance of the respective Template class:

    [C#]
    private RadComboBox RadComboBoxProduct;
     
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
     
        RadComboBoxProduct = new RadComboBox();
        RadComboBoxProduct.ID = "RadComboBoxProduct";
        RadComboBoxProduct.Height = Unit.Pixel(200);
        RadComboBoxProduct.Width = Unit.Pixel(200);
        RadComboBoxProduct.DropDownWidth = Unit.Pixel(298);
        RadComboBoxProduct.HighlightTemplatedItems = true;
        RadComboBoxProduct.Skin = "Vista";
     
        Page.Form.Controls.Add(RadComboBoxProduct);
     
        RadComboBoxProduct.HeaderTemplate = new MultiColumnHeaderTemplate();
        RadComboBoxProduct.ItemTemplate = new MultiColumnItemTemplate();
    }

    [VB.NET]
    Private RadComboBoxProduct As RadComboBox
     
    Protected Overrides Sub OnInit(ByVal e As EventArgs)
        MyBase.OnInit(e)
     
        RadComboBoxProduct = New RadComboBox()
        RadComboBoxProduct.ID = "RadComboBoxProduct"
        RadComboBoxProduct.Height = Unit.Pixel(200)
        RadComboBoxProduct.Width = Unit.Pixel(200)
        RadComboBoxProduct.DropDownWidth = Unit.Pixel(298)
        RadComboBoxProduct.HighlightTemplatedItems = True
        RadComboBoxProduct.Skin = "Vista"
     
        Page.Form.Controls.Add(RadComboBoxProduct)
     
        RadComboBoxProduct.HeaderTemplate = New MultiColumnHeaderTemplate()
        RadComboBoxProduct.ItemTemplate = New MultiColumnItemTemplate()
    End Sub

    Please note that ItemTemplate and HeaderTemplate properties are of type ITemplate – that is why you need to create custom template classes that implement this interface.

    To create a custom template class:
    2.1. Create a new class that implements the System.Web.UI.ITemplate interface:
    [C#]
    public class MultiColumnItemTemplate : ITemplate
    {
        public MultiColumnItemTemplate(){}
    }

    [VB.NET]
    Public Class MultiColumnItemTemplateVB Implements ITemplate 
        Public Sub New()
        End Sub
    End Class

    2.2. In the class, implement the InstantiateIn method, which is a member of the ITemplate interface. This method provides a way to insert an instance of text and controls into the specified container.

    2.3. In the InstantiateIn method, create the controls for the template item, set their properties, and then add them to the parent's Controls collection:

    [C#]
    public void InstantiateIn(Control container)
    {
        Table tb;
        TableRow tr;
     
        tb = new Table();
        tb.Width = Unit.Pixel(275);
        tb.CellPadding = 0;
        tb.CellSpacing = 0;
        tr = new TableRow();
     
        TableCell tdName;
        TableCell tdQuantity;
        TableCell tdPrice;
     
        tdName = new TableCell();
        tdName.Width = Unit.Pixel(177);
        tdName.DataBinding += new EventHandler(tdName_DataBinding);
        tr.Cells.Add(tdName);
     
        tdQuantity = new TableCell();
        tdQuantity.Width = Unit.Pixel(60);
        tdQuantity.DataBinding += new EventHandler(tdQuantity_DataBinding);
        tr.Cells.Add(tdQuantity);
     
        tdPrice = new TableCell();
        tdPrice.Width = Unit.Pixel(40);
        tdPrice.DataBinding += new EventHandler(tdPrice_DataBinding);
        tr.Cells.Add(tdPrice);
     
        tb.Rows.Add(tr);
     
        container.Controls.Add(tb);
    }

    [VB.NET]

    Public Sub InstantiateIn(ByVal container As Control) Implements ITemplate.InstantiateIn
        Dim tb As Table
        Dim tr As TableRow
     
        tb = New Table()
        tb.Width = Unit.Pixel(275)
        tb.CellPadding = 0
        tb.CellSpacing = 0
        tr = New TableRow()
     
        Dim tdName As TableCell
        Dim tdQuantity As TableCell
        Dim tdPrice As TableCell
     
        tdName = New TableCell()
        tdName.Width = Unit.Pixel(177)
        AddHandler tdName.DataBinding, New EventHandler(AddressOf tdName_DataBinding)
        tr.Cells.Add(tdName)
     
        tdQuantity = New TableCell()
        tdQuantity.Width = Unit.Pixel(60)
        AddHandler tdQuantity.DataBinding, New EventHandler(AddressOf tdQuantity_DataBinding)
        tr.Cells.Add(tdQuantity)
     
        tdPrice = New TableCell()
        tdPrice.Width = Unit.Pixel(40)
        AddHandler tdPrice.DataBinding, New EventHandler(AddressOf tdPrice_DataBinding)
        tr.Cells.Add(tdPrice)
     
        tb.Rows.Add(tr)
     
        container.Controls.Add(tb)
    End Sub

    2.4. Add a handler method for DataBinding event (highlighted above). In the handler, get the data that you want to bind to and assign it to the corresponding property of the control being bound:

    [C#]
    void tdPrice_DataBinding(object sender, EventArgs e)
    {
        TableCell tdPrice = (TableCell)sender;
        RadComboBoxItem item = (RadComboBoxItem)tdPrice.BindingContainer;
     
        DataRowView row = (DataRowView)item.DataItem;
        tdPrice.Text = row["UnitPrice"].ToString();
    }
     
    void tdQuantity_DataBinding(object sender, EventArgs e)
    {
        TableCell tdQuantity = (TableCell)sender;
        RadComboBoxItem item = (RadComboBoxItem)tdQuantity.BindingContainer;
     
        DataRowView row = (DataRowView)item.DataItem;
        tdQuantity.Text = row["UnitsInStock"].ToString();
    }
     
    void tdName_DataBinding(object sender, EventArgs e)
    {
        TableCell tdName = (TableCell)sender;
        RadComboBoxItem item = (RadComboBoxItem)tdName.BindingContainer;
     
        tdName.Text = item.Text;
    }

    [VB.NET]
    Private Sub tdPrice_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
        Dim tdPrice As TableCell = DirectCast(sender, TableCell)
        Dim item As RadComboBoxItem = DirectCast(tdPrice.BindingContainer, RadComboBoxItem)
     
        Dim row As DataRowView = DirectCast(item.DataItem, DataRowView)
        tdPrice.Text = row("UnitPrice").ToString()
    End Sub
     
    Private Sub tdQuantity_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
        Dim tdQuantity As TableCell = DirectCast(sender, TableCell)
        Dim item As RadComboBoxItem = DirectCast(tdQuantity.BindingContainer, RadComboBoxItem)
     
        Dim row As DataRowView = DirectCast(item.DataItem, DataRowView)
        tdQuantity.Text = row("UnitsInStock").ToString()
    End Sub
     
    Private Sub tdName_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
        Dim tdName As TableCell = DirectCast(sender, TableCell)
        Dim item As RadComboBoxItem = DirectCast(tdName.BindingContainer, RadComboBoxItem)
     
        tdName.Text = item.Text
    End Sub


    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > ComboBox > Dynamic Multi-Column Template