Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

ComboBox / Templates

  • select
  • select
Select

  • RadComboBox fully supports templates. You can embed any content inside a RadComboBox template, including HTML markup and ASP.NET server controls, as well as other third party controls (and actually any control from the Telerik RadControls suite as well). The syntax is very similar to what you're used to from the default DataGrid control. If you do not specify an ItemTemplate, all RadComboBox items are rendered using their Text property as plain text. If you specify <ItemTemplate>, then the respective template is used for rendering.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.ComboboxExamplesCS.Templates.DefaultCS"
        Language="c#" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
        <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <qsf:Header runat="server" ID="Header1" NavigationLanguage="C#" />
        <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all"
            ControlsToSkip="Scrollbars"></telerik:RadFormDecorator>
        <div class="example-panel">
            <ul class="combobox-panel">
                <li>
                    <asp:Label runat="server" ID="lblCarType" AssociatedControlID="RadComboBox1" Text="Type:" />
                    <telerik:RadComboBox ID="RadComboBox1" runat="server" DataSourceID="SqlDataSource1"
                        DataValueField="ID" DataTextField="TypeName" EmptyMessage="All Types" HighlightTemplatedItems="true"
                        AllowCustomText="true" Width="240px" OnClientDropDownClosing="onDropDownClosing"
                        OnClientBlur="onBlur">
                        <ItemTemplate>
                            <div onclick="StopPropagation(event)" class="combo-item-template">
                                <asp:CheckBox runat="server" ID="chk1" Checked="true" onclick="onCheckBoxClick(this)" />
                                <asp:Label runat="server" ID="Label1" AssociatedControlID="chk1">
                                        <img src='<%# Eval("ImagePath") %>' alt="" /><%# Eval("TypeName") %>
                                </asp:Label>
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                </li>
                <li>
                    <asp:Label runat="server" ID="lblCarModel" AssociatedControlID="RadComboBox2" Text="Model:" />
                    <telerik:RadComboBox ID="RadComboBox2" Width="240px" Height="300px" AllowCustomText="true"
                        EmptyMessage="Showing all cars" OnClientDropDownClosing="OnClientDropDownClosingHandler"
                        runat="server">
                        <ItemTemplate>
                            <div onclick="StopPropagation(event)">
                                <telerik:RadTreeView ID="RadTreeView1" runat="server" DataSourceID="SqlDataSource2"
                                    DataTextField="VehicleName" DataValueField="VehicleTypeID" DataFieldID="ID" DataFieldParentID="VehicleParentID"
                                    OnClientNodeClicking="OnClientNodeClickingHandler">
                                    <DataBindings>
                                        <telerik:RadTreeNodeBinding Depth="0" Category="Make" ImageUrlField="ImagePath" />
                                    </DataBindings>
                                </telerik:RadTreeView>
                            </div>
                        </ItemTemplate>
                        <Items>
                            <telerik:RadComboBoxItem />
                        </Items>
                    </telerik:RadComboBox>
                </li>
            </ul>
    <asp:LinkButton ID="Button1" runat="server" Text="Select" OnClick="Button1_OnClick"
    CssClass="rent-button" />
            <ul class="status-panel">
                <li style="width: 300px">
                    <label>
                        Selected vehicle types:</label><asp:Label runat="server" ID="SelectedTypeLabel" /></li>
                <li>
                    <label>
                        Selected car:</label><asp:Label runat="server" ID="SelectedCarLabel" /></li>
            </ul>
        </div>
        <script type="text/javascript">
            /* <![CDATA[ */
                var cancelDropDownClosing = false;

                function pageLoad()
                {
                    $telerik.$('#RadComboBox1_DropDown .rcbList li').click(function (e){
                        e.cancelBubble = true;
                        if (e.stopPropagation)
                        {
                            e.stopPropagation();
                        }
                    });
                }
                
                function StopPropagation(e)
                {
                    //cancel bubbling
                    e.cancelBubble = true;
                    if (e.stopPropagation)
                    {
                        e.stopPropagation();
                    }
                }

                function onBlur(sender)
                {
                    //cancelDropDownClosing = false;
                    cancelFirstCombo = false;
                }

                function onDropDownClosing(sender, args)
                {
                    cancelDropDownClosing = false;
                }

                function onCheckBoxClick(chk)
                {
                    var combo = $find("<%= RadComboBox1.ClientID %>");
                    var combo2 = $find("<%= RadComboBox2.ClientID %>");
                    //prevent second combo from closing
                    cancelDropDownClosing = true;
                    //holds the text of all checked items
                    var text = "";
                    //holds the values of all checked items
                    var values = "";
                    //get the collection of all items
                    var items = combo.get_items();
                    //enumerate all items
                    for (var i = 0; i < items.get_count(); i++)
                    {
                        var item = items.getItem(i);
                        //get the checkbox element of the current item
                        var chk1 = $get(combo.get_id() + "_i" + i + "_chk1");
                        if (chk1.checked)
                        {
                            text += item.get_text() + "," ;
                            values += item.get_value() + ",";
                        }
                    }
                    //remove the last comma from the string
                    text = removeLastComma(text);
                    values = removeLastComma(values);
                
                    if (text.length > 0)
                    {
                        //set the text of the combobox
                        combo.set_text(text);
                        //update the treeview in the second combobox
                        updateTreeView(values);
                        combo2.set_text("");
                        //open the second combobox
                        if (!combo2.get_dropDownVisible())
                            combo2.showDropDown();
                    }
                    else
                    {
                        //all checkboxes are unchecked
                        //so reset the controls
                        combo.set_text("");
                        updateTreeView(values);
                        combo2.set_emptyMessage("Showing all cars");
                    }
                }

                //this method hides the nodes of the treeeview depending on
                //the checked items in the first combobox
                function updateTreeView(values)
                {
                    var arrValues = values.split(",");
                    var combo2 = $find("<%= RadComboBox2.ClientID %>");
                    var tree = combo2.get_items().getItem(0).findControl("RadTreeView1");
                    var nodes = tree.get_allNodes();
                
                    for (var i = 0; i < nodes.length; i++)
                    {
                        var node = nodes[i];
                        //set all nodes visible initially
                        node.set_visible(true);
                        //hide all leaf nodes which value does not exist in the values string
                        if (values.indexOf(node.get_value()) == -1 && node.get_value() && values.length > 0)
                        {
                            node.set_visible(false);
                        }
                    }
                
                    //loop through loop nodes only and hide
                    //the ones that does not have any visible child node
                    //expand the others
                    var rootNodes = tree.get_nodes();
                    for (var i = 0; i < rootNodes.get_count(); i++)
                    {
                        var root = rootNodes.getNode(i);
                        var showTheRootNode = false;
                        for (var j = 0; j < root.get_nodes().get_count(); j++)
                        {
                            if (root.get_nodes().getNode(j).get_visible())
                            {
                                root.expand();
                                showTheRootNode = true;
                                break;
                            }
                        }
                        root.set_visible(showTheRootNode);
                    }
                }

                //this method removes the ending comma from a string
                function removeLastComma(str)
                {
                    return str.replace(/,$/,"");
                }

                function OnClientNodeClickingHandler(sender, e)
                {
                    var node = e.get_node();
                    //check if we have clicked on a Make
                    if (node.get_category() == "Make")
                    {
                        node.toggle();
                    }
                    else
                    {
                        //find the combobox, set its text and close it
                        var combo = $find("<%= RadComboBox2.ClientID %>");
                        combo.set_text(node.get_text());
                        cancelDropDownClosing = false;
                        combo.hideDropDown();
                    }
                }

                function OnClientDropDownClosingHandler(sender, e)
                {
                    //do not close the second combo if
                    //a checkbox from the first is clicked
                    e.set_cancel(cancelDropDownClosing);
                }
            /* ]]> */
        </script>
        <qsf:Footer runat="server" ID="Footer1"></qsf:Footer>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT [ID], [TypeName], [ImagePath] FROM [Vehicle_Types]" />
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT * FROM Vehicles" />
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451