New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Virtualization

Search for shipping names

RadMultiSelect supports virtualization of the data and DOM elements. This feature is useful for displaying large data sets and offers performance optimization by reusing elements in the browser and only fetching paged data from the server.

To enable Virtualization, you will need the following configuration:

  • VirtualSettings.ItemHeight and Height must be set
  • WebServiceClientDataSource.EnableServerFiltering="true"
  • WebServiceClientDataSource.AllowPaging="true"
  • WebServiceClientDataSource.EnableServerPaging="true"
  • WebServiceClientDataSource.PageSize="((Height / ItemHeight) * 4))"
  • DefaultCS.aspx
  • VirtualizationWebService.cs
  • scripts.js
<%@ 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>

Support & Learning Resources

Find Assistance