<%@ 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 runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<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="VirtualizationWebServiceCS.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>
</div>
</form>
</body>
</html>