<%@ Page Language="c#" 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>
    <style>
        .order-id {
            display: inline-block;
            min-width: 60px;
        }
    </style>
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadMultiColumnComboBox1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="SelectLbl" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {

            }

            protected void RadMultiColumnComboBox1_SelectedIndexChanged(object sender, RadMultiColumnComboBoxSelectedIndexChangedEventArgs e)
            {
                SelectLbl.Text = "Item Selected triggered " + DateTime.Now;

            }
</script>
        <div class="demo-container size-narrow" runat="server">
            <h4>Search for shipping names</h4>

            <asp:Label ID="SelectLbl" runat="server"></asp:Label>
            
            <script>
                function OnLoad(sender, args) {
                    sender.kendoWidget.dataSource.transport.parameterMap = function (ev) {
                        return JSON.stringify({ customfilterstring: JSON.stringify(ev) })
                    }
                }
            </script>

            <telerik:RadMultiColumnComboBox runat="server" Filter="Contains" 
                OnSelectedIndexChanged="RadMultiColumnComboBox1_SelectedIndexChanged"
                EnforceMinLength="false" AutoPostBack="true"
                AutoClose="false" DataTextField="ShipName" DataValueField="OrderID" Width="400px" 
                ID="RadMultiColumnComboBox1" IgnoreCase="true" Placeholder="Shipping names..." 
                EnableServerFiltering="true" EnableServerPaging="true" AllowPaging="true" 
                ClientEvents-OnLoad="OnLoad">
                <VirtualSettings ItemHeight="26" ValueMapper="valueMapper" />
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="OrderID" Title="Order" Width="100" />
                    <telerik:MultiColumnComboBoxColumn Field="ShipName" Title="Ship" Width="300" />
                    <telerik:MultiColumnComboBoxColumn Field="ShipCity" Title="City" Width="200" />
                </ColumnsCollection>
                <WebServiceSettings ServiceType="Default" BaseUrl="VirtualizationWebService.asmx/">
                    <Select Url="GetOrders" RequestType="Post" DataType="JSON" ContentType="application/json; charset=utf-8" />
                </WebServiceSettings>
                <Schema DataName="d.Data" TotalName="d.Count" ResponseType="JSON">
                    <Model>
                        <telerik:ClientDataSourceModelField DataType="Number" FieldName="OrderID" />
                        <telerik:ClientDataSourceModelField DataType="Number" FieldName="Freight" />
                        <telerik:ClientDataSourceModelField DataType="String" FieldName="ShipName" />
                        <telerik:ClientDataSourceModelField DataType="Date" FieldName="OrderDate" />
                        <telerik:ClientDataSourceModelField DataType="String" FieldName="ShipCity" />
                    </Model>
                </Schema>
            </telerik:RadMultiColumnComboBox>
        </div>
    </form>
</body>
</html>
