<%@ Page Language="vb" AutoEventWireup="true" %>
<%@ 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" />
<div class="demo-container size-thin" runat="server">
<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" DataSourceID="SqlDataSource1"
AccessKey="w"
DropDownWidth="600px" Height="400px" Width="100%"
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 id="result" style="display: none;">You have selected <span id="nameSpan"></span> who is a <span id="titleSpan"></span> at <span id="companySpan"></span>.</div>
<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>
</form>
</body>
</html>