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

Virtualization

RadMultiColumnComboBox 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
  • EnableServerFiltering="true"
  • AllowPaging="true"
  • EnableServerPaging="true"
  • PageSize="((Height / ItemHeight) * 4))"
  • DefaultCS.aspx
  • 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>
    <script src="scripts.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin" runat="server" >
        <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1"
            Height="400" Width="100%"
            Placeholder="select from the dropdown or type"
            DataTextField="ShipName" DataValueField="OrderID"
            Filter="Contains" FilterFields="ShipName,ShipCountry"
            EnableServerFiltering="true"
            AllowPaging="true"
            EnableServerPaging="true"
            PageSize="80">
            <WebServiceSettings ServiceType="OData" Select-DataType="JSON">
                <Select Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" />
            </WebServiceSettings>
            <VirtualSettings ItemHeight="28" ValueMapper="valueMapper" />
            <ColumnsCollection>
                <telerik:MultiColumnComboBoxColumn Field="OrderID" Title="Order" Width="100" />
                <telerik:MultiColumnComboBoxColumn Field="ShipName" Title="Ship" Width="300" />
                <telerik:MultiColumnComboBoxColumn Field="ShipCountry" Title="Country " Width="200" />
            </ColumnsCollection>
        </telerik:RadMultiColumnComboBox>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance