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

Send e-mail

Compose a new message

This application scenario demonstrates how to implement a simple form for sending a message to a list of recipients.

  • The RadAutoCompleteBox is bound to the list of friends names.
  • Upon writing, a drop down with values containing the use input will be displayed.
  • The first match will be highlighted and selected with the Enter or with the mouse. The up and down arrows can be used to select some of the names in the dropdown.
  • To remove some of the names, the user will need to press backspace twice or click on the delete icon.
  • To send the message user will need to click the "Send Message" button.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="AutoCompleteBox.Examples.ApplicationScenarios.DefaultCS" %>

<!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" />
</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">
        <div class="tfb-form">
            <asp:PlaceHolder runat="server" ID="PlaceHolder1" Visible="true">
                <div class="tfb-header">
                    <h2>Compose a new message</h2>
                </div>
                <div class="tfb-row">
                    <label class="tfb-label" for="<%= RadAutoCompleteBox1.ClientID + "_Input" %>">To:</label>
                    <telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox1"  Width="375" DataSourceID="SqlDataSource1"
                        DataTextField="ContactName" DataValueField="Email" Filter="StartsWith" Skin="Web20"
                        DropDownHeight="400">
                        <DropDownItemTemplate>
                            <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td align="left" style="width: 25%; padding-left: 10px;">
                                        <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server"  AlternateText="Contact Photo"
                                            ToolTip="Contact Photo" Width="60" Height="90" ResizeMode="Fit" DataValue='<%# DataBinder.Eval(Container.DataItem, "Photo")%>'></telerik:RadBinaryImage>
                                    </td>
                                    <td align="left" style="width: 75%; padding-left: 10px;">
                                        <%# DataBinder.Eval(Container.DataItem, "ContactName")%>
                                        <br />
                                        <%# DataBinder.Eval(Container.DataItem, "City")%>,
                                        <%# DataBinder.Eval(Container.DataItem, "Country")%>
                                    </td>
                                </tr>
                            </table>
                        </DropDownItemTemplate>
                    </telerik:RadAutoCompleteBox>
                </div>
                <div class="tfb-row">
                    <label class="tfb-label" for="<%= txtSubject.ClientID %>">Subject:</label>
                    <asp:TextBox runat="server" ID="txtSubject" CssClass="tfb-field radPreventDecorate" />
                </div>
                <div class="tfb-row">
                    <label class="tfb-label" for="<%= txtMessage.ClientID %>">Message:</label>
                    <asp:TextBox runat="server" ID="txtMessage" CssClass="tfb-field radPreventDecorate"
                        TextMode="MultiLine" Columns="20" Rows="5" />
                </div>
                <div class="tfb-row tfb-buttons">
                    <asp:Button runat="server" ID="SendMessageButton" CssClass="tfb-button" Text="Send Message"
                        OnClick="SendMessageButton_Click" CausesValidation="true" />
                </div>
            </asp:PlaceHolder>
            <asp:PlaceHolder runat="server" ID="PlaceHolder2" Visible="false">
                <div class="tfb-header">
                    <h2>Message sent!</h2>
                </div>
                <div class="tfb-row">
                    <label class="tfb-label">To:</label>
                    <asp:Literal runat="server" ID="ltrTo" />
                </div>
                <div class="tfb-row">
                    <label class="tfb-label">Subject:</label>
                    <asp:Label runat="server" ID="ltrSubject" CssClass="tfb-text" />
                </div>
                <div class="tfb-row">
                    <label class="tfb-label">Message:</label>
                    <asp:Label runat="server" ID="ltrMessage" CssClass="tfb-text" />
                </div>
                <div class="tfb-row tfb-buttons">
                    <asp:Button runat="server" ID="Button1" CssClass="tfb-button" Text="Back" OnClick="BackButton_Click"
                        CausesValidation="true" />
                </div>
            </asp:PlaceHolder>
        </div>
    </div>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ContactName], [City], [Country], [Photo], LOWER(REPLACE([ContactName], ' ', '_')+ '@telerik.com') as EMAIL FROM [CustomerPhotos]"></asp:SqlDataSource>

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

Support & Learning Resources

Find Assistance