<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="MultiColumnComboBox_Server_Side_Data_Binding_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>
</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">
        <div class="demo-container size-thin">
            <h2>SqlDataSource Binding</h2>
            <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1"
                Width="220px" Height="400" DropDownWidth="400"
                DataTextField="ContactName" DataValueField="CustomerID" DataSourceID="SqlDataSource1"
                Filter="StartsWith" FilterFields="CustomerID, ContactName">
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="ContactName" Title="ContactName">
                    </telerik:MultiColumnComboBoxColumn>
                    <telerik:MultiColumnComboBoxColumn Field="CustomerID" Title="CustomerID">
                    </telerik:MultiColumnComboBoxColumn>
                </ColumnsCollection>
            </telerik:RadMultiColumnComboBox>
            <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Select" ID="RadButton1" OnClick="RadButton1_Click" />
            <p>
                <asp:Label runat="server" ID="Label1" />
            </p>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>
        </div>
        <div class="demo-container size-thin">
            <h2>Generic Collection Binding</h2>
            <telerik:RadMultiColumnComboBox ID="RadMultiColumnComboBox2" DropDownWidth="400" Width="220px" runat="server"
                DataTextField="Name" DataValueField="Id">
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="Id" Title="Id" />
                    <telerik:MultiColumnComboBoxColumn Field="Name" Title="Name" />
                    <telerik:MultiColumnComboBoxColumn Field="Title" Title="Title" />
                </ColumnsCollection>
            </telerik:RadMultiColumnComboBox>
            <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Select" ID="RadButton2" OnClick="RadButton2_Click" />
            <p>
                <asp:Label ID="Label2" runat="server" />
            </p>
        </div>
        <div class="demo-container size-thin">
            <h2>DataTable Binding</h2>
            <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox3" DropDownWidth="800" Width="220px"
                DataTextField="ShipName" DataValueField="OrderID">
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="OrderID" Title="OrderID" />
                    <telerik:MultiColumnComboBoxColumn Field="OrderDate" Title="OrderDate">
                        <Template>
        #= kendo.toString(OrderDate, "dd/MM/yyyy") #
                        </Template>
                    </telerik:MultiColumnComboBoxColumn>
                    <telerik:MultiColumnComboBoxColumn Field="Freight" Title="Freight" />
                    <telerik:MultiColumnComboBoxColumn Field="ShipName" Title="ShipName" />
                </ColumnsCollection>
            </telerik:RadMultiColumnComboBox>
            <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Select" ID="RadButton3" OnClick="RadButton3_Click" />
            <p>
                <asp:Label runat="server" ID="Label3" />
            </p>
        </div>
    </telerik:RadAjaxPanel>
    </form>
</body>
</html>