Ignite UI™ API Documentation

ui.igGridAppendRowsOnDemand

The igGrid Append Rows On Demand feature adds functionality for user to append data to the grid. It works in two modes: Automatic and Button.

In Automatic mode the data is appended when the user scrolls to the bottom of the grid.

In Button mode the data is appended when the user presses the "Load more data" button located at the bottom of the grid.

Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igGrid control with load on demand feature.

For details on how to reference the required scripts and themes for the igGrid control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
    <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
        var infragisticsTweets = [
            {user: "infragistics", userName: "@infragistics", tweet: "Bitcoin Network Speed Breaks 1 Petahash per Second - The Genesis Block http://buff.ly/1f0nNHz", date: "8:35 AM - 23 Sep 13"},
            {user: "infragistics", userName: "@infragistics", tweet: "@BrentSchooley is visiting the Springfield MO .NET UG. Stop by on 9/24 to hear his Designing for Windows 8.1 talk! http://ow.ly/i/3bWHF", date: "7:15 AM - 23 Sep 13"},
            {user: "infragistics", userName: "@infragistics", tweet: "Doing Away With Bad Design Ideas http://buff.ly/1f0o910 ", date: "5:30 AM - 23 Sep 13"},
            {user: "infragistics", userName: "@infragistics", tweet: "Technical Evangelist Mihail Mateev will be at SQL Saturday. Will you? http://bit.ly/1dmvg1K  http://ow.ly/i/3b08W ", date: "3:10 AM - 23 Sep 13"},
            {user: "infragistics", userName: "@infragistics", tweet: "Indigo Studio v2.0 by @wireframesmag http://bit.ly/16IQVzv  http://ow.ly/i/3c8U7 ", date: "1:45 AM - 23 Sep 13"}
        ];
        $(function () {
            $('#grid').igGrid({
            dataSource: infragisticsTweets,
            width: "400px",
            autoGenerateColumns: false,
            localSchemaTransform: false,
            columns: [{
                key: 'Tweets',
                dataType: 'string',
                headerText: 'Infragistics tweets',
                unbound: true,
                template: "<div style='float:left'><img src='infragistics.png' ></img></div><div class='tweet'><p style='height:20px'><span class='tweet-user'>${user}</span><span class='tweet-user-name'>${userName}</span><span class='tweet-date'>${date}</span></p><p class='tweet-text'>${tweet}</p></div>"
            }],
            features: [{
                name: 'AppendRowsOnDemand',
                chunkSize: 5,
                loadTrigger: "button"
            }]
            });
        });
    </script>
</head>
<body>
    <table id="grid"></table>
</body>
</html>

Related Samples

Append Rows On Demand (igGrid)

Dependencies

jquery-1.9.1.js

jquery.ui.core.js

jquery.ui.widget.js

infragistics.ui.grid.framework.js

infragistics.ui.shared.js

infragistics.util.js

Inherits

jQuery.widget

Show Details

chunkIndexUrlKey

Type:: string
Default:: null

Denotes the name of the encoded URL parameter that will state what is the currently requested chunk index.

Code Sample

//Initialize
$(".selector").igGrid({
    features: [
        {
            name : "AppendRowsOnDemand",
            chunkIndexUrlKey: "chunk"
        }
    ]
});
 
//Get
var chunkIndexUrlKey = $(".selector").igGridAppendRowsOnDemand("option", "chunkIndexUrlKey");

chunkSize

Type:: number
Default:: 25

Default number of records per chunk.

Code Sample

//Initialize
$(".selector").igGrid({
    features: [
        {
            name : "AppendRowsOnDemand",
            chunkSize: 25
        }
    ]
});
 
//Get
var chunkSize = $(".selector").igGridAppendRowsOnDemand("option", "chunkSize");

chunkSizeUrlKey

Type:: string
Default:: null

Denotes the name of the encoded URL parameter that will state what is the currently requested chunk size.

Code Sample

//Initialize
$(".selector").igGrid({
    features: [
        {
            name : "AppendRowsOnDemand",
            chunkSizeUrlKey: "chunkSize"
        }
    ]
});
 
//Get
var chunkSizeUrlKey = $(".selector").igGridAppendRowsOnDemand("option", "chunkSizeUrlKey");

currentChunkIndex

Type:

number

Default:

0

Current chunk index position.

Code Sample

//Get
var currentChunkIndex = $(".selector").igGridAppendRowsOnDemand("option", "currentChunkIndex");

defaultChunkIndex

Type:: number
Default:: 0

Initial chunk index position.

Code Sample

//Initialize
$(".selector").igGrid({
    features: [
        {
            name : "AppendRowsOnDemand",
            defaultChunkIndex: 2
        }
    ]
});
 
//Get
var defaultChunkIndex = $(".selector").igGridAppendRowsOnDemand("option", "defaultChunkIndex");

loadMoreDataButtonText
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies caption text for the "load more data" button. Use option locale.loadMoreDataButtonText.

Code Sample

//Initialize
$(".selector").igGrid({
    features: [
        {
            name : "AppendRowsOnDemand",
            loadMoreDataButtonText: "Load next chunk"
        }
    ]
});
 
//Get
var loadMoreDataButtonText = $(".selector").igGridAppendRowsOnDemand("option", "loadMoreDataButtonText");

loadTrigger

Type:: enumeration
Default:: auto

denotes the append rows on demand request method.

Members

auto
Type:string
new record will be appended to the grid while the user scrolls the scrollbar.
button
Type:string
a button will be rendered at the bottom of the grid. The user should press it to load more rows.

Code Sample

//Initialize
$(".selector").igGrid({
    features: [
        {
            name : "AppendRowsOnDemand",
            loadTrigger: "button"
        }
    ]
});
//Get
var loadTrigger = $(".selector").igGridAppendRowsOnDemand("option", "loadTrigger");

locale

Type:: object
Default:: {}

loadMoreDataButtonText

Type:: string
Default:: ""

Specifies caption text for the "load more data" button.

Code Sample

//Initialize
$(".selector").igGrid({
    features: [
        {
            name : "AppendRowsOnDemand",
            locale: { loadMoreDataButtonText : "Load next chunk"}
        }
    ]
});
 
//Get
var loadMoreDataButtonText = $(".selector").igGridAppendRowsOnDemand("option", "locale").loadMoreDataButtonText;
 
//Set
$(".selector").igGridAppendRowsOnDemand("option", "locale", {loadMoreDataButtonText : "Load next chunk"});

recordCountKey

Type:: string
Default:: null

The property in the response that will hold the total number of records in the data source.

Code Sample

//Initialize
$(".selector").igGrid({
    features: [
        {
            name : "AppendRowsOnDemand",
            recordCountKey: "totalRecords"
        }
    ]
});
 
//Get
var recordCountKey = $(".selector").igGridAppendRowsOnDemand("option", "recordCountKey");

type

Type:: enumeration
Default:: null

Defines local or remote type of appending rows on demand in igGrid.

Members

remote
Type:string
request data from the remote endpoint.
local
Type:string
loading data on the client-side.

Code Sample

//Initialize
$(".selector").igGrid({
    features: [
        {
            name : "AppendRowsOnDemand",
            type: "remote"
        }
    ]
});
//Get
var type = $(".selector").igGridAppendRowsOnDemand("option", "type");

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

rowsRequested

Cancellable:: false

Event fired after the requested rows are returned from the remote endpoint, but before grid data rebinds.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("iggridappendrowsondemandrowsrequested", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igGridAppendRowsOnDemand widget that fired the event
    ui.owner;
 
    //  Get a reference to the igGrid widget to which the idGridAppendRowsOnDemand is bound
    ui.owner.grid;
 
    //  Get the current chunk index
    ui.chunkIndex;
 
    //  Get the chunk size
    ui.chunkSize;
 
    //  Get the requested rows
    ui.rows;
});
 
//Initialize
$(".selector").igGrid({
    features: [{
        name: "AppendRowsOnDemand",
        rowsRequested: function (evt, ui) { ... }
    }]
});

rowsRequesting

Cancellable:: true

Event fired before the rows are requested from the remote endpoint.
Return false in order to cancel requesting of rows.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on( "iggridappendrowsondemandrowsrequesting", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igGridAppendRowsOnDemand widget that fired the event
    ui.owner;
 
    //  Get a reference to the igGrid widget to which the idGridAppendRowsOnDemand is bound
    ui.owner.grid;
 
    //  Get the next chunk index
    ui.chunkIndex;
 
    //  Get the next chunk size
    ui.chunkSize;
});
 
//Initialize
$(".selector").igGrid({
    features: [{
        name: "AppendRowsOnDemand",
        rowsRequesting: function (evt, ui) { ... }
    }]
});

Show Details

destroy

.igGridAppendRowsOnDemand( "destroy" );
Destroys the append rows on demand widget.
Code Sample

$(".selector").igGridAppendRowsOnDemand("destroy");
nextChunk

.igGridAppendRowsOnDemand( "nextChunk" );
Loads the next chunk of data.
Code Sample

$(".selector").igGridAppendRowsOnDemand("nextChunk");

Ignite UI | Samples

ui.igGridAppendRowsOnDemand

Code Sample

Related Samples

Dependencies

Inherits