Available in the Full Version

Data Grid - Virtualization (Fixed)

Product IDProduct NameProduct NumberMake Flag
 
1Adjustable RaceAR-5381
2Bearing BallBA-8327
3BB Ball BearingBE-2349
4Headset Ball BearingsBE-2908
316BladeBL-2036
317LL CrankarmCA-5965
318ML CrankarmCA-6738
319HL CrankarmCA-7457
320Chainring BoltsCB-2903
321Chainring NutCN-6137
322ChainringCR-7833
323Crown RaceCR-9981
324Chain StaysCS-2812
325Decal 1DC-8732
326Decal 2DC-9824
327Down TubeDT-2377

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates the unique HTML virtualization capabilities of our jQuery Grid control. Virtualization is valuable when displaying large sets of records to end users. For example, a virtualized grid can support a data source of thousands of records, and still provide a responsive experience to the end-user during a rapid scroll of the grid. This responsiveness is present when virtual scrolling and paging are not enabled. The current sample has 501 JSON records loaded at a single time on the client, and the end user experience does not differ from that of a grid where all of the DOM elements are explicitly rendered in HTML. Virtualization is possible by supporting a virtual DOM section in the grid that is constantly refreshed for data. This means that HTML elements for the entire data set are not explicitly created, instead DOM elements are reused in the grid. Refreshing data in existing DOM elements boosts performance significantly for scenarios that require large sets of data without using paging or virtual scrolling to fetch more data from the server. The virtualization settings are configurable in the Virtualization property in the grid. You have the option of providing either boolean values or numeric values to configure virtualization settings. Providing numeric values instruct the grid that if the number of loaded rows in the data source exceeds this value, virtualization is automatically enabled. Further, you may configure vertical (row) and horizontal (column) virtualization separately. Vertical virtualization is enabled by setting RowVirtualization to true, while horizontal virtualization is enabled by setting ColumnVirtualization to true. In the case where you only want to have horizontal or vertical virtualization, Virtualization must be set to false. For vertical virtualization, it is important to note the average row height property – it’s default value is set to 25 pixels, but it might be necessary to manually adjust this property when working with a grid that has a small width, but the cell text is long so it spans multiple lines, and thus affects the rows’ heights.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
    <table id="grid"></table>
    <script src="/data-files/adventureworks.min.js"></script>
    <script>
        $(function () {
            $("#grid").igGrid({
                autoGenerateColumns: false,
                renderCheckboxes: true,
                width: "100%",
                height: "500px",
                virtualization: true,
                virtualizationMode: "fixed",
                avgRowHeight: "30px",
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%" },
                    { headerText: "Product Name", key: "Name", dataType: "string", width: "40%" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "30%" },
                    { headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "15%" }
                ],
                dataSource: adventureWorks
            });
        });
    </script>
</body>
</html>