SearchBox - Client-side Templates

Welcomes you to dinner on !

Please RSVP by calling

We will be expecting you at
.

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadSearchBox provides support for client templates. The template itself contains mark up and/or binding expressions which are evaluated against a DataItem and then rendered on the client.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Inherits="Telerik.QuickStart.QsfPage"  %>

<%@ 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 href="styles.css" rel="stylesheet" />
    <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" />

    <div class="demo-container no-bg">

        <telerik:RadODataDataSource runat="server" ID="RadODataDataSource1">
            <Transport>
                <Read Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/" DataType="JSONP"></Read>
            </Transport>
            <Schema>
                <telerik:DataModel ModelID="Employee" Set="Employees">
                    <telerik:DataModelField FieldName="City" />
                    <telerik:DataModelField FieldName="Address" />
                    <telerik:DataModelField FieldName="LastName" />
                    <telerik:DataModelField FieldName="FirstName" />
                    <telerik:DataModelField FieldName="HomePhone" />
                    <telerik:DataModelField FieldName="City" />
                    <telerik:DataModelField FieldName="TitleOfCourtesy" />
                    <telerik:DataModelField FieldName="BirthDate" />
                    <telerik:DataModelField FieldName="PostalCode" />
                    <telerik:DataModelField FieldName="Country" />
                </telerik:DataModel>
            </Schema>
        </telerik:RadODataDataSource>

        <div class="searchBoxContainer">

            <telerik:RadSearchBox RenderMode="Lightweight" runat="server" ID="RadSearchBox1" Width="350" Skin="Silk"
                DataTextField="FirstName" OnClientSearch="OnClientSearch"
                ODataDataSourceID="RadODataDataSource1" DataKeyNames="Address,Phone,TitleOfCourtesy,BirthDate,PostalCode,Country" DataModelID="Employee">
                <DropDownSettings Height="400px">
                    <ClientTemplate>
                    <h3>#= Text # #= DataItem.LastName #</h3>
                    <div class="details">
                        <img src="icon_list.png" alt="Alternate Text" style="float:left; height:36px; width:36px;" />
                        <span class="info">
                            <p>
                                <b>Address:</b> #= DataItem.Address #<br>
                                <b>Contact Phone:</b> #= DataItem.HomePhone #
                            </p>
                        </span>
                    </div>
                    </ClientTemplate>
                </DropDownSettings>
            </telerik:RadSearchBox>

        </div>
        <div class="dinnerDetails">
            <h3></h3>
            <p>
                Welcomes you to dinner on <span class="date"></span>!
            </p>
            <p>
                Please RSVP by calling
                <br />
                <span class="phone"></span>
            </p>
            <p>
                We will be expecting you at
                <br />
                <span class="address"></span>.
            </p>
        </div>
    </div>

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

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?