<%@ 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>

        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                RadMultiSelect1.Value = new[] { "10265", "10289", "10390" };
            }
    </script>
        <div class="demo-container size-narrow" runat="server">
            <h4>Search for shipping names</h4>

            <telerik:RadMultiSelect runat="server" Filter="Contains" EnforceMinLength="false" AutoClose="false" DataTextField="ShipName" DataValueField="OrderID" Width="400px" ID="RadMultiSelect1" Placeholder="Shipping names...">
                <VirtualSettings ItemHeight="26" ValueMapper="valueMapper" />
                <ItemTemplate>
                    <span class='order-id'>#= OrderID #</span> #= ShipName #, #= ShipCity #
                </ItemTemplate>
                <WebServiceClientDataSource EnableServerFiltering="true" AllowPaging="true" PageSize="80" EnableServerPaging="true">
                    <ClientEvents OnCustomParameter="OnCustomParameter" />
                    <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>
                </WebServiceClientDataSource>
            </telerik:RadMultiSelect>
            <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" EnforceMinLength="false" 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>

            <telerik:RadMultiColumnComboBox runat="server" Filter="Contains" ClientDataSourceID="RadClientDataSource1" EnforceMinLength="false" AutoClose="false" DataTextField="ShipName" DataValueField="OrderID" Width="400px" ID="RadMultiColumnComboBox2" IgnoreCase="true" Placeholder="Shipping names..." 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>
            </telerik:RadMultiColumnComboBox>

            <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1" EnableServerFiltering="true" EnableServerPaging="true" AllowPaging="true">
                <ClientEvents OnCustomParameter="OnCustomParameter" />
                <DataSource>
                    <WebServiceDataSourceSettings ServiceType="Default" BaseUrl="VirtualizationWebService.asmx/">
                        <Select Url="GetOrders" RequestType="Post" DataType="JSON" ContentType="application/json; charset=utf-8" />
                    </WebServiceDataSourceSettings>
                </DataSource>
                <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:RadClientDataSource>

        </div>

    </form>
</body>
</html>
