ComboBox - Server Templates

  • Selected vehicle types:
  • Selected car:
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
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.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ComboBox.Examples.Functionality.Templates.DefaultCS"Language="c#"  %>

<%@ 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">
    <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="310px" 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="310px" 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 runat="server" class="associatedLables">
                        Selected vehicle types:</asp:Label>
                    <asp:Label runat="server" ID="SelectedTypeLabel" />
                </li>
                <li>
                    <asp:Label 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>

Find Assistance

Help Us Improve

Was this example helpful?