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

Server-side Templates

Select Employee:

Elizabeth Lincoln

You can control the way items are rendered by using the ItemTemplate property of RadDropDownList. Do not forget to call the DataBind method if you are using databinding expressions (<%# %>) in the template.

  • DefaultVB.aspx
<%@ Page Language="VB"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container size-thin">

        <h2>Select Employee:</h2>
        <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="RadDropDownList1"  DataSourceID="SqlDataSource1" Width="310px"
            DataTextField="ContactName" DropDownWidth="310px" DropDownHeight="300px">
            <ItemTemplate>
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td style="width: 25%">Name:
                                    </td>
                                    <td style="width: 70%">
                                        <%# DataBinder.Eval(Container.DataItem, "ContactName")%>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Title:
                                    </td>
                                    <td>
                                        <%# DataBinder.Eval(Container.DataItem, "ContactTitle")%>
                                    </td>
                                </tr>
                                <tr>
                                    <td>City:
                                    </td>
                                    <td>
                                        <%# DataBinder.Eval(Container.DataItem, "City")%>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Country:
                                    </td>
                                    <td>
                                        <%# DataBinder.Eval(Container.DataItem, "Country")%>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Phone:
                                    </td>
                                    <td>
                                        <%# DataBinder.Eval(Container.DataItem, "Phone")%>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td align="right" style="width: 25%; padding-left: 10px;">
                            <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server"
                                
                                AlternateText="Contact Photo"
                                ToolTip="Contact Photo"
                                Width="90px"
                                Height="110px"
                                ResizeMode="Fit"
                                DataValue='<%# IIf(Eval("Photo") IsNot DBNull.Value, Eval("Photo"),New System.Byte(-1) {})%>'></telerik:RadBinaryImage>
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </telerik:RadDropDownList>

    </div>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [CustomerPhotos]"></asp:SqlDataSource>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance