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))"
  • DefaultVB.aspx
  • VirtualizationWebService.vb
  • scripts.js
<%@ Page Language="vb" 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 Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
            RadMultiSelect1.Value = {"10265", "10289", "10390"}
        End Sub
    </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="VirtualizationWebServiceVB.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