Available in the Full Version

Data Grid - Virtualization (Continuous)

Drag a column here or select columns to Group By
Product NameShip NameOrder DateTotal PriceShip AddressShip CityShip CountryPostal Code
 
1Vegie-spreadAlfred's Futterkiste10/3/1997$878.00Obere Str. 57BerlinGermany12209
2Aniseed SyrupAlfred's Futterkiste10/13/1997$60.00Obere Str. 57BerlinGermany12209
3LakkalikööriAlfred's Futterkiste10/13/1997$270.00Obere Str. 57BerlinGermany12209
4Raclette CourdavaultAlfred's Futterkiste1/15/1998$825.00Obere Str. 57BerlinGermany12209
5Rössle SauerkrautAlfred's Futterkiste3/16/1998$91.20Obere Str. 57BerlinGermany12209
6FlotemysostAlfred's Futterkiste4/9/1998$430.00Obere Str. 57BerlinGermany12209
7Grandma's Boysenberry SpreadAlfred's Futterkiste3/16/1998$380.00Obere Str. 57BerlinGermany12209
8Escargots de BourgogneAlfred's Futterkiste4/9/1998$503.50Obere Str. 57BerlinGermany12209
9Original Frankfurter grüne SoßeAlfred's Futterkiste1/15/1998$20.80Obere Str. 57BerlinGermany12209
10Rössle SauerkrautAlfreds Futterkiste8/25/1997$513.00Obere Str. 57BerlinGermany12209
11Chartreuse verteAlfreds Futterkiste8/25/1997$283.50Obere Str. 57BerlinGermany12209
12SpegesildAlfreds Futterkiste8/25/1997$18.00Obere Str. 57BerlinGermany12209
13GudbrandsdalsostAna Trujillo Emparedados y helados9/18/1996$28.80Avda. de la Constitución 2222México D.F.Mexico05021
14Outback LagerAna Trujillo Emparedados y helados9/18/1996$60.00Avda. de la Constitución 2222México D.F.Mexico05021
15TofuAna Trujillo Emparedados y helados8/8/1997$69.75Avda. de la Constitución 2222México D.F.Mexico05021
16Singaporean Hokkien Fried MeeAna Trujillo Emparedados y helados8/8/1997$70.00Avda. de la Constitución 2222México D.F.Mexico05021
17Camembert PierrotAna Trujillo Emparedados y helados8/8/1997$340.00Avda. de la Constitución 2222México D.F.Mexico05021
18Mascarpone FabioliAna Trujillo Emparedados y helados11/28/1997$320.00Avda. de la Constitución 2222México D.F.Mexico05021
19Queso CabralesAna Trujillo Emparedados y helados3/4/1998$42.00Avda. de la Constitución 2222México D.F.Mexico05021
20KonbuAna Trujillo Emparedados y helados3/4/1998$60.00Avda. de la Constitución 2222México D.F.Mexico05021
21Teatime Chocolate BiscuitsAna Trujillo Emparedados y helados3/4/1998$64.40Avda. de la Constitución 2222México D.F.Mexico05021
22Mozzarella di GiovanniAna Trujillo Emparedados y helados3/4/1998$348.00Avda. de la Constitución 2222México D.F.Mexico05021
23Queso CabralesAntonio Moreno Taquería11/27/1996$403.20Mataderos 2312México D.F.Mexico05023
24Alice MuttonAntonio Moreno Taquería6/19/1997$702.00Mataderos 2312México D.F.Mexico05023
25Sasquatch AleAntonio Moreno Taquería6/19/1997$560.00Mataderos 2312México D.F.Mexico05023
26Perth PastiesAntonio Moreno Taquería6/19/1997$820.00Mataderos 2312México D.F.Mexico05023
27GeitostAntonio Moreno Taquería9/25/1997$75.00Mataderos 2312México D.F.Mexico05023
28Louisiana Hot Spiced OkraAntonio Moreno Taquería9/25/1997$68.00Mataderos 2312México D.F.Mexico05023
29Rhönbräu KlosterbierAntonio Moreno Taquería9/25/1997$232.50Mataderos 2312México D.F.Mexico05023
30ChangAntonio Moreno Taquería1/28/1998$380.00Mataderos 2312México D.F.Mexico05023
31Singaporean Hokkien Fried MeeAntonio Moreno Taquería1/28/1998$280.00Mataderos 2312México D.F.Mexico05023
32Queso CabralesAntonio Moreno Taquería5/13/1997$945.00Mataderos 2312México D.F.Mexico05023
33Boston Crab MeatAntonio Moreno Taquería5/13/1997$165.60Mataderos 2312México D.F.Mexico05023
34Ravioli AngeloAntonio Moreno Taquería5/13/1997$87.75Mataderos 2312México D.F.Mexico05023
35Raclette CourdavaultAntonio Moreno Taquería5/13/1997$742.50Mataderos 2312México D.F.Mexico05023
36Ipoh CoffeeAntonio Moreno Taquería4/15/1997$586.50Mataderos 2312México D.F.Mexico05023
37ChocoladeAntonio Moreno Taquería4/15/1997$162.56Mataderos 2312México D.F.Mexico05023
38Gumbär GummibärchenAntonio Moreno Taquería9/22/1997$796.37Mataderos 2312México D.F.Mexico05023
39GeitostAntonio Moreno Taquería9/22/1997$17.00Mataderos 2312México D.F.Mexico05023
40Guaraná FantásticaAround the Horn11/15/1996$90.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
41Ravioli AngeloAround the Horn11/15/1996$390.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
42KonbuAround the Horn12/16/1996$96.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
43Valkoinen suklaaAround the Horn12/16/1996$195.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
44Gnocchi di nonna AliceAround the Horn12/16/1996$608.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
45Zaanse koekenAround the Horn6/4/1997$237.50Brook Farm Stratford St. MaryColchesterUKCO7 6JX
46Manjimup Dried ApplesAround the Horn6/4/1997$1,060.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
47Filo MixAround the Horn6/4/1997$210.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
48Perth PastiesAround the Horn6/4/1997$590.40Brook Farm Stratford St. MaryColchesterUKCO7 6JX
49Röd KaviarAround the Horn6/4/1997$45.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
50Pâté chinoisAround the Horn10/16/1997$504.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
51Ravioli AngeloAround the Horn10/16/1997$780.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
52Gustaf's KnäckebrödAround the Horn12/8/1997$84.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
53Gorgonzola TelinoAround the Horn12/8/1997$625.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
54Camembert PierrotAround the Horn12/8/1997$510.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
55FlotemysostAround the Horn12/8/1997$258.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
56Jack's New England Clam ChowderAround the Horn12/24/1997$135.10Brook Farm Stratford St. MaryColchesterUKCO7 6JX
57Filo MixAround the Horn12/24/1997$56.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
58Steeleye StoutAround the Horn2/2/1998$72.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
59Laughing Lumberjack LagerAround the Horn2/2/1998$210.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
60Valkoinen suklaaAround the Horn3/3/1998$390.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
61Gorgonzola TelinoAround the Horn4/10/1998$187.50Brook Farm Stratford St. MaryColchesterUKCO7 6JX
62Inlagd SillAround the Horn4/10/1998$304.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
63SpegesildAround the Horn11/17/1997$319.20Brook Farm Stratford St. MaryColchesterUKCO7 6JX
64Sir Rodney's MarmaladeAround the Horn3/16/1998$3,847.50Brook Farm Stratford St. MaryColchesterUKCO7 6JX
65Gorgonzola TelinoAround the Horn3/16/1998$593.75Brook Farm Stratford St. MaryColchesterUKCO7 6JX
66ChocoladeAround the Horn2/21/1997$137.70Brook Farm Stratford St. MaryColchesterUKCO7 6JX
67Outback LagerAround the Horn2/21/1997$270.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
68Outback LagerAround the Horn10/16/1997$357.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
69ChangAround the Horn11/14/1997$228.00Brook Farm Stratford St. MaryColchesterUKCO7 6JX
 

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 continuous virtualization capabilities of the igGrid control. Continuous virtualization is a feature that controls how rows are displayed in the grid i.e. only a chunk of the total rows in the data source are rendered in the DOM. As the user scrolls up and down the grid, the virtualization feature determines if the current rows are sufficient to display the next/previous portion of rows. If new rows are required, then the current portion of rows is disposed and the new portion of rows is created. Therefore a grid with 1,000 records in its data source may only display 30 at a time which significantly reduces the DOM overhead. One of the advantages when using continuous virtualization is that each row in the igGrid control could span on several lines. Thus, row height may vary from row to row.

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/nw-invoices.js"></script>
    <script>
        $(function () {
            $("#grid").igGrid({
                autoGenerateColumns: false,
                autofitLastColumn : false,
                renderCheckboxes: true,
                width: "100%",
                height: "400px",
                rowVirtualization : true,
                virtualizationMode: "continuous",
                columns: [
                   { headerText: "Product Name", key: "ProductName", dataType: "string", width: "15%" },
                   { headerText: "Ship Name", key: "ShipName", dataType: "string", width: "20%" },
                   { headerText: "Order Date", key: "OrderDate", dataType: "date", width: "10%" },
                   { headerText: "Total Price", key: "ExtendedPrice", dataType: "number", format: "currency", width: "10%" },
                   { headerText: "Ship Address", key: "ShipAddress", dataType: "string", width: "15%" },
                   { headerText: "Ship City", key: "ShipCity", dataType: "string", width: "10%" },
                   { headerText: "Ship Country", key: "ShipCountry", dataType: "string", width: "10%" },
                   { headerText: "Postal Code", key: "ShipPostalCode", dataType: "string", width: "10%" }
                ],
                dataSource: northwindInvoices,
                features:
                [
                    {
                        name: "Selection"
                    },
                    {
                        name: "RowSelectors",
                        enableRowNumbering: true
                    },
                    {
                        name: "GroupBy"
                    },
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "OrderID",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "OrderDate",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "ExtendedPrice",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "ShipAddress",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "ShipCity",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "ShipCountry",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "ShipPostalCode",
                                classes: "ui-hidden-phone"
                            }
                        ]
                    }
                ]
            });
        });
    </script>
</body>
</html>