New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Server Templates

  • Selected vehicle types:
  • Selected car:
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 UI 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.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="ComboBox.Examples.Functionality.Templates.DefaultVB"Language="vb"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            //<![CDATA[
            Sys.Application.add_load(function () {
                window.demo.combo = $find("<%= RadComboBox1.ClientID %>");
                window.demo.combo2 = $find("<%=RadComboBox2.ClientID %>");
                demo.initialize();
            });
            //]]>
        </script>
    </telerik:RadCodeBlock>

    <telerik:RadFormDecorator RenderMode="Lightweight" ID="Decorator1" runat="server" Skin="Office2010Silver" />
    <div class="demo-container no-bg">
        <div class="qsf-fb">
            <ul>
                <li>
                    <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="RadComboBox1" DataSourceID="SqlDataSource1" 
                        DataValueField="ID" DataTextField="TypeName" EmptyMessage="All Types" HighlightTemplatedItems="true"
                        Width="200px" OnClientDropDownClosing="onDropDownClosing"
                        OnClientBlur="onBlur" Label="Type:" LabelCssClass="associatedLables" Skin="Office2010Silver">
                        <ItemTemplate>
                            <div onclick="StopPropagation(event)" class="combo-item-template">
                                <label>
                                    <asp:CheckBox runat="server" ID="chk1" Checked="true" onclick="onCheckBoxClick(this)" />
                                    <img src='<%# Eval("ImagePath") %>' alt="icon" /><%# Eval("TypeName") %>
                                </label>
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                </li>
                <li>
                    <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="RadComboBox2" Width="200px" Height="300" 
                        EmptyMessage="Showing all cars" OnClientDropDownClosing="OnClientDropDownClosingHandler"
                        Label="Model:" LabelCssClass="associatedLables" Skin="Office2010Silver">
                        <ItemTemplate>
                            <div onclick="StopPropagation(event)">
                                <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" DataSourceID="SqlDataSource2"
                                    DataTextField="VehicleName" DataValueField="VehicleTypeID" DataFieldID="ID" DataFieldParentID="VehicleParentID"
                                    OnClientNodeClicking="OnClientNodeClickingHandler" Skin="Office2010Silver">
                                    <DataBindings>
                                        <telerik:RadTreeNodeBinding Depth="0" Category="Make" ImageUrlField="ImagePath" />
                                    </DataBindings>
                                </telerik:RadTreeView>
                            </div>
                        </ItemTemplate>
                        <Items>
                            <telerik:RadComboBoxItem />
                        </Items>
                    </telerik:RadComboBox>
                </li>
            </ul>
            <p class="buttons">
                <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="server" Text="Select" OnClick="Button1_OnClick"></telerik:RadButton>
            </p>
        </div>
        <div class="qsf-result">
            <ul>
                <li>
                    <asp:Label ID="Label1" runat="server" class="associatedLables">
                        Selected vehicle types:</asp:Label>
                    <asp:Label runat="server" ID="SelectedTypeLabel" />
                </li>
                <li>
                    <asp:Label ID="Label2" runat="server" class="associatedLables">
                        Selected car:</asp:Label>
                    <asp:Label runat="server" ID="SelectedCarLabel" />
                </li>
            </ul>
        </div>
    </div>
    <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>

Support & Learning Resources

Find Assistance