Silk skin

MultiSelect - Virtualization

Search for shipping names

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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

Help Us Improve

Was this example helpful?