Available in the Full Version

Data Grid - Append Rows On Demand

Load on Demand - loadTrigger: auto

Product NameProduct NumberMake FlagReorder PointSell Start Date
Adjustable RaceAR-5381false7506/1/1998
Bearing BallBA-8327false7506/1/1998
BB Ball BearingBE-2349true6006/1/1998
Headset Ball BearingsBE-2908false6006/1/1998
BladeBL-2036true6006/1/1998
LL CrankarmCA-5965false3756/1/1998
ML CrankarmCA-6738false3756/1/1998
HL CrankarmCA-7457false3756/1/1998
Chainring BoltsCB-2903false7506/1/1998
Chainring NutCN-6137false7506/1/1998
ChainringCR-7833false7506/1/1998
Crown RaceCR-9981false7506/1/1998
Chain StaysCS-2812true7506/1/1998
Decal 1DC-8732false7506/1/1998
Decal 2DC-9824false7506/1/1998
Down TubeDT-2377true6006/1/1998
Mountain End CapsEC-M092true7506/1/1998
Road End CapsEC-R098true7506/1/1998
Touring End CapsEC-T209true7506/1/1998
Fork EndFE-3760true6006/1/1998
FreewheelFH-2981false3756/1/1998
Flat Washer 1FW-1000false7506/1/1998
Flat Washer 6FW-1200false7506/1/1998
Flat Washer 2FW-1400false7506/1/1998
Flat Washer 9FW-3400false7506/1/1998

Load on Demand - loadTrigger: button

Product NameProduct NumberMake FlagReorder PointSell Start Date
Adjustable RaceAR-5381false7506/1/1998
Bearing BallBA-8327false7506/1/1998
BB Ball BearingBE-2349true6006/1/1998
Headset Ball BearingsBE-2908false6006/1/1998
BladeBL-2036true6006/1/1998
LL CrankarmCA-5965false3756/1/1998
ML CrankarmCA-6738false3756/1/1998
HL CrankarmCA-7457false3756/1/1998
Chainring BoltsCB-2903false7506/1/1998
Chainring NutCN-6137false7506/1/1998
ChainringCR-7833false7506/1/1998
Crown RaceCR-9981false7506/1/1998
Chain StaysCS-2812true7506/1/1998
Decal 1DC-8732false7506/1/1998
Decal 2DC-9824false7506/1/1998
Down TubeDT-2377true6006/1/1998
Mountain End CapsEC-M092true7506/1/1998
Road End CapsEC-R098true7506/1/1998
Touring End CapsEC-T209true7506/1/1998
Fork EndFE-3760true6006/1/1998
FreewheelFH-2981false3756/1/1998
Flat Washer 1FW-1000false7506/1/1998
Flat Washer 6FW-1200false7506/1/1998
Flat Washer 2FW-1400false7506/1/1998
Flat Washer 9FW-3400false7506/1/1998

This sample is designed for a larger screen size.

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

The igGrid Append Rows On Demand feature adds functionality to append data to the grid. It works in two modes: Automatic and Button. Use the upper grid to experience the Automatic mode. Scroll to the bottom of the grid to see that the new data will be appended to the grid. Use the bottom grid to experience the Button mode. Scroll to the bottom of the grid and then press the "Load more data" button to append new data.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <!-- 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>
    <script src="/js/angular.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>
    <script src="/js/external/jsrender.js"></script>
    <script src="/data-files/adventureworks.min.js"></script>

</head>
<body>
    <h3>Load on Demand - loadTrigger: auto</h3>
    <table id="autoAppendRowsOnDemand"></table>
    <br>

    <h3>Load on Demand - loadTrigger: button</h3>
    <table id="buttonAppendRowsOnDemand"></table>
    <br>
    <script>

    $(function () {
        //jsRender helper function which formats the string date
        $.views.helpers({
            formatDate: function (val) {
                var date = new Date(val);
                if (!isNaN(date) && ($.type(date) === "date")) {
                    return $.ig.formatter(date, "date", "dateTime");
                }
                return val;
            }
        });

        $('#autoAppendRowsOnDemand').igGrid({
        	dataSource: adventureWorks,
        	autoGenerateColumns: false,
        	columns: [
				{ headerText: "Product Name", key: "Name", dataType: "string", width: "20%" },
				{ headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "20%" },
				{ headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "10%" },
				{ headerText: "Reorder Point", key: "ReorderPoint", dataType: "number", width: "10%" },
				{ headerText: "Sell Start Date", key: "SellStartDate", dataType: "date", width: "15%" }
			],
            enableUTCDates: true,
            features: [
                {
                    chunkIndexUrlKey: 'page',
                    chunkSizeUrlKey: 'pageSize',
                    name: 'AppendRowsOnDemand',
                    loadTrigger: 'auto'
                }
            ],
            width: '100%',
            height: '300px',
            templatingEngine: 'jsrender'
        });

        $('#buttonAppendRowsOnDemand').igGrid({
        	dataSource: adventureWorks,
            autoGenerateColumns: false,
            enableUTCDates: true,
            columns: [
				{ headerText: "Product Name", key: "Name", dataType: "string", width: "20%" },
				{ headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "20%" },
				{ headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "10%" },
				{ headerText: "Reorder Point", key: "ReorderPoint", dataType: "number", width: "10%" },
				{ headerText: "Sell Start Date", key: "SellStartDate", dataType: "date", width: "15%" }
			],
            features: [
                {
                    chunkIndexUrlKey: 'page',
                    chunkSizeUrlKey: 'pageSize',
                    name: 'AppendRowsOnDemand',
                    loadTrigger: 'button'
                }
            ],
            width: '100%',
            height: '300px',
            templatingEngine: 'jsrender'
        });
    });
    </script>

</body>
</html>