Windows7 skin

MultiColumnComboBox - Virtualization

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

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 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>
    <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

Help Us Improve

Was this example helpful?