<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.ComboboxExamplesCS.MultiColumnCombo.DefaultCS"
    Language="c#" %>

<!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><title></title>
<style type="text/css">
        .rcbHeader ul,
        .rcbFooter ul,
        .rcbItem ul, .rcbHovered ul, .rcbDisabled ul
        {
            width: 100%;
            display: inline-block;
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        
        .rcbHeader ul:after,
        .rcbFooter ul:after,
        .rcbItem ul:after, .rcbHovered ul:after, .rcbDisabled ul:after
        {
            content: ".";
            display: block;
            visibility: hidden;
            font-size: 0;
            line-height: 0;
            height: 0;
            clear: both;
        }
        
        .col1, .col2, .col3, .col4
        {
            float: left;
            width: 120px;
            margin: 0;
            padding: 0 5px 0 0;
            line-height: 14px;
        }
    </style>
</head>
<body class="BODY">
    <form runat="server" id="mainForm" method="post" style="width: 100%">
       <asp:ScriptManager ID="ScriptManager1" runat="server" />    
    
        <!-- content start -->
        <div >            
			<div >
				<span class="text" style="float: left; font: 13px 'Segoe UI', Arial, sans-serif; color: #4888a2; padding: 6px 18px 0 0; display: block">Supervisor: </span>
					<telerik:RadComboBox  ID="RadComboBox1" 
					    runat="server" Height="190px" 
					    DropDownWidth="524px"
					    Skin="Office2007"
						Width="420px" MarkFirstMatch="true" 
						OnDataBound="RadComboBox1_DataBound" 
						DataSourceID="SessionDataSource1" 
						EnableLoadOnDemand="true" 
						HighlightTemplatedItems="true"
						ItemRequestTimeout="500" 
						OnClientItemsRequested="UpdateItemCountField"
						OnItemsRequested="RadComboBox1_ItemsRequested" 
						OnItemDataBound="RadComboBox1_ItemDataBound">
						<HeaderTemplate>
							<ul>
							    <li class="col1">Company Name</li>
							    <li class="col2">City</li>
							    <li class="col3">Title</li>
							</ul>
						</HeaderTemplate>
						<ItemTemplate>
							<ul>
							    <li class="col1"><%# DataBinder.Eval(Container.DataItem, "CompanyName") %></li>
							    <li class="col2"><%# DataBinder.Eval(Container.DataItem, "City") %></li>
							    <li class="col3"><%# DataBinder.Eval(Container.DataItem, "ContactTitle") %></li>
							</ul>
						</ItemTemplate>
						<FooterTemplate>
						    A total of <asp:Label runat="server" ID="RadComboItemsCount" /> items
						</FooterTemplate>
					</telerik:RadComboBox>
			   <span>
					&nbsp;
					<asp:Button runat="server" ID="Button1" Text="Select" CssClass="button" OnClick="Button1_Click"></asp:Button>
				</span>
				<div style="margin: 20px 0 10px 0; font: 13px 'Segoe UI', Arial, sans-serif; color: #4888a2;"><asp:Label runat="server" ID="Label1"></asp:Label></div>
    			<asp:SqlDataSource ID="SessionDataSource1" runat="server"
					ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
					SelectCommand="SELECT * FROM [Customers]" >
				</asp:SqlDataSource>
			</div>
		</div>
		
		<script type="text/javascript">
		    function UpdateItemCountField (sender, args)
		    {
		        sender._getFooterElement().innerHTML= "A total of " + sender.get_items().get_count() + " items";
		    }
        </script>
        
        <!-- content end -->
    </form>
</body>
</html>
