Multi-column ComboBox with grouping (solution available)

Thread is closed for posting
1 posts, 1 answers
  1. Answer
    306C23F2-E49D-4BF8-9CCF-595EA706FD8E
    306C23F2-E49D-4BF8-9CCF-595EA706FD8E avatar
    156 posts
    Member since:
    Feb 2009

    Posted 24 Nov 2009 Link to this post

    Requirements
    RadControls version

    Q3 2009
    .NET version

    3.5
    Visual Studio version

    VS 2008
    programming language C#
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION

    Requirements: Provide combobox where items are being displayed in groups. User cannot choose group header from the drop down list.

    Introduction:
    There is a number of ways of achieving the goal. This approach uses combobox that is bound to the list of objects. It shows binding expressions in ASPX file as well as OnItemDatabound approach.

    Solution:
    1. Create new RadControls project using Telerik menu.
    2. Add the following class:

    public class MyComboBoxItem 
    { 
        public string Text { get; set; } 
        public string Value { get; set; } 
        public string Description { get; set; } 
        public bool IsGroupHeader { get; set; } 
    } 
     

    3. In ASPX file add combobox:

    <telerik:RadComboBox ID="myComboBox" runat="server" MarkFirstMatch="true" AllowCustomText="false" HighlightTemplatedItems="true" OnItemDataBound="myComboBox_ItemDataBound" Width="330px"             DropDownWidth="400px"> 
    </telerik:RadComboBox 

    4. Set combobox item template:
     <ItemTemplate> 
                    <div id="divHeader" runat="server" class="rcbHeader" style="color: Black; width: 360px"> 
                        <%# DataBinder.Eval(Container.DataItem, "Text") %> 
                    </div> 
                    <div id="divItem" runat="server" style="width: 360px"> 
                        <table style="width: 100%; text-align: left"> 
                            <tr> 
                                <td style="width: 45%"> 
                                    <%# DataBinder.Eval(Container.DataItem, "Text") %> 
                                </td> 
                                <td style="width: 45%"> 
                                    <%# DataBinder.Eval(Container.DataItem, "Description") %> 
                                </td> 
                            </tr> 
                        </table> 
                    </div> 
                </ItemTemplate> 

    5. In the codebehind file for the page add the following handler:
     protected void myComboBox_ItemDataBound(object sender, RadComboBoxItemEventArgs e) 
        { 
            var data = e.Item.DataItem as MyComboBoxItem; 
            if (data == null) 
            { 
                return; 
            } 
     
            e.Item.Text = data.Text; 
            e.Item.Value = data.Value; 
            e.Item.Enabled = !data.IsGroupHeader; 
     
            var divItem = e.Item.FindControl("divItem") as HtmlGenericControl; 
            var divHeader = e.Item.FindControl("divHeader") as HtmlGenericControl; 
     
            if (divHeader != null) 
            { 
                divHeader.Visible = data.IsGroupHeader; 
            } 
            if (divItem != null) 
            { 
                divItem.Visible = !data.IsGroupHeader; 
            } 
        } 

    6. Bind the combobox with sample data (ex. on the page load)
     var list = new List<MyComboBoxItem>(); 
            list.Add(new MyComboBoxItem { Description = "Description 1", IsGroupHeader = true, Text = "Header 1", Value = "myId1" }); 
            list.Add(new MyComboBoxItem { Description = "Description 2", IsGroupHeader = false, Text = "Item 1", Value = "myId2" }); 
            list.Add(new MyComboBoxItem { Description = "Description 3", IsGroupHeader = false, Text = "Item 2", Value = "myId3" }); 
            list.Add(new MyComboBoxItem { Description = "Description 4", IsGroupHeader = false, Text = "Item 3", Value = "myId4" }); 
            list.Add(new MyComboBoxItem { Description = "Description 5", IsGroupHeader = false, Text = "Item 4", Value = "myId5" }); 
            list.Add(new MyComboBoxItem { Description = "Description 6", IsGroupHeader = false, Text = "Item 5", Value = "myId6" }); 
            list.Add(new MyComboBoxItem { Description = "Description 7", IsGroupHeader = false, Text = "Item 6", Value = "myId7" }); 
     
            list.Add(new MyComboBoxItem { Description = "Description 2", IsGroupHeader = true, Text = "Header 2", Value = "myId2" }); 
            list.Add(new MyComboBoxItem { Description = "Description 12", IsGroupHeader = false, Text = "Item 11", Value = "myId11" }); 
            list.Add(new MyComboBoxItem { Description = "Description 13", IsGroupHeader = false, Text = "Item 12", Value = "myId12" }); 
            list.Add(new MyComboBoxItem { Description = "Description 14", IsGroupHeader = false, Text = "Item 13", Value = "myId13" }); 
            list.Add(new MyComboBoxItem { Description = "Description 15", IsGroupHeader = false, Text = "Item 14", Value = "myId14" }); 
            list.Add(new MyComboBoxItem { Description = "Description 16", IsGroupHeader = false, Text = "Item 15", Value = "myId15" }); 
            list.Add(new MyComboBoxItem { Description = "Description 17", IsGroupHeader = false, Text = "Item 16", Value = "myId16" }); 
     
     
            list.Add(new MyComboBoxItem { Description = "Description 3", IsGroupHeader = true, Text = "Header 3", Value = "myId3" }); 
            list.Add(new MyComboBoxItem { Description = "Description 22", IsGroupHeader = false, Text = "Item 21", Value = "myId21" }); 
            list.Add(new MyComboBoxItem { Description = "Description 23", IsGroupHeader = false, Text = "Item 22", Value = "myId22" }); 
            list.Add(new MyComboBoxItem { Description = "Description 24", IsGroupHeader = false, Text = "Item 23", Value = "myId23" }); 
            list.Add(new MyComboBoxItem { Description = "Description 25", IsGroupHeader = false, Text = "Item 24", Value = "myId24" }); 
            list.Add(new MyComboBoxItem { Description = "Description 26", IsGroupHeader = false, Text = "Item 25", Value = "myId25" }); 
            list.Add(new MyComboBoxItem { Description = "Description 27", IsGroupHeader = false, Text = "Item 26", Value = "myId26" }); 
     
     
            myComboBox.DataSource = list; 
            myComboBox.DataBind(); 

    7. Tweak visuals with CSS :)
    8. Enjoy :)

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.