<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.MultiColumnComboBox.Overview.DefaultCS" %>
<%@ 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 href="styles.css" rel="stylesheet" />
<script 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:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
<div class="demo-container size-thin" runat="server">
<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" DataSourceID="SqlDataSource1"
DropDownWidth="600px" Height="400px" Width="100%"
Filter="contains" FilterFields="ContactName, ContactTitle, CompanyName"
DataTextField="ContactName" DataValueField="CustomerID"
Placeholder="select from the dropdown or type">
<ColumnsCollection>
<telerik:MultiColumnComboBoxColumn Field="ContactName" Title="Name" Width="200px">
<Template>
<div class='customer-photo'
style='background-image: url(../../img/northwind/Customers/thumbs/#:data.CustomerID#.jpg);'></div>
<span class='customer-name'>#: ContactName #</span>
</Template>
</telerik:MultiColumnComboBoxColumn>
<telerik:MultiColumnComboBoxColumn Field="ContactTitle" Title="Title" Width="200px" />
<telerik:MultiColumnComboBoxColumn Field="CompanyName" Title="Company" Width="200px" />
</ColumnsCollection>
<ClientEvents OnSelect="OnSelectHandler" />
</telerik:RadMultiColumnComboBox>
<div class="buttonWrapper">
<telerik:RadPushButton runat="server" ID="RadPushButton1" Text="Get Selection in the Server" OnClick="RadPushButton1_Click"></telerik:RadPushButton>
</div>
<asp:Panel ClientIDMode="Static" ID="result" runat="server" />
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient"
SelectCommand="SELECT Top 20 [CustomerID], [ContactName], [ContactTitle], [CompanyName] FROM [Customers]"></asp:SqlDataSource>
</div>
</telerik:RadAjaxPanel>
<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
</form>
</body>
</html>