Ignite UI API Reference

ui.igGridLoadOnDemand

ui.igGridLoadOnDemand_image

The igGrid Load 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: 'LoadOnDemand',
				chunkSize: 5,
				loadTrigger: "button"
			}]
			});
		});
	</script>
</head>
<body>
    <div id="grid"></div>
</body>
</html>

Related Samples

Dependencies

jquery-1.4.4.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.ui.grid.framework.js
infragistics.ui.shared.js
infragistics.util.js

Inherits

  • 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 : "LoadOnDemand",
                    chunkIndexUrlKey: "chunk"
                }
            ]
        });

        //Get
        var chunkIndexUrlKey = $(".selector").igGridLoadOnDemand("option", "chunkIndexUrlKey");

  • chunkSize

    Type:
    number
    Default:
    25

    Default number of records per chunk.

    Code Sample

     
        //Initialize
        $(".selector").igGrid({
            features: [
                {
                    name : "LoadOnDemand",
                    chunkSize: 25
                }
            ]
        });

        //Get
        var chunkSize = $(".selector").igGridLoadOnDemand("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 : "LoadOnDemand",
                    chunkSizeUrlKey: "chunkSize"
                }
            ]
        });

        //Get
        var chunkSizeUrlKey = $(".selector").igGridLoadOnDemand("option", "chunkSizeUrlKey");

  • currentChunkIndex

    Type:
    number
    Default:
    0

    Current chunk index position.

    Code Sample

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

  • defaultChunkIndex

    Type:
    number
    Default:
    0

    Initial chunk index position.

    Code Sample

     
        //Initialize
        $(".selector").igGrid({
            features: [
                {
                    name : "LoadOnDemand",
                    defaultChunkIndex: 2
                }
            ]
        });

        //Get
        var defaultChunkIndex = $(".selector").igGridLoadOnDemand("option", "defaultChunkIndex");

  • loadMoreDataButtonText

    Type:
    string
    Default:
    ""

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

    Code Sample

     
        //Initialize
        $(".selector").igGrid({
            features: [
                {
                    name : "LoadOnDemand",
                    loadMoreDataButtonText: "Load next chunk"
                }
            ]
        });

        //Get
        var loadMoreDataButtonText = $(".selector").igGridLoadOnDemand("option", "loadMoreDataButtonText");

  • loadTrigger

    Type:
    enumeration
    Default:
    auto

    denotes the load 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 : "LoadOnDemand",
                    loadTrigger: "button"
                }
            ]
        });

        //Get
        var loadTrigger = $(".selector").igGridLoadOnDemand("option", "loadTrigger");

  • 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 : "LoadOnDemand",
                    recordCountKey: "totalRecords"
                }
            ]
        });

        //Get
        var recordCountKey = $(".selector").igGridLoadOnDemand("option", "recordCountKey");

  • type

    Type:
    enumeration
    Default:
    null

    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 : "LoadOnDemand",
                    type: "remote"
                }
            ]
        });

        //Get
        var type = $(".selector").igGridLoadOnDemand("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
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGridLoadOnDemand.
    Use ui.owner.grid to get reference to igGrid.
    Use ui.chunkIndex to get current chunk index.
    Use ui.chunkSize to get chunk size.
    Use ui.rows to get requested rows.

    Code Sample

     
        //Bind after initialization
        $(document).delegate(".selector", "iggridloadondemandrowsrequested", function (evt, ui) {
            //return browser event
            evt.originalEvent;

            //	Get a reference to the igGridLoadOnDemand widget that fired the event
            ui.owner;

            //	Get a reference to the igGrid widget to which the idGridLoadOnDemand 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: "LoadOnDemand",
                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.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGridLoadOnDemand.
    Use ui.owner.grid to get reference to igGrid.
    Use ui.chunkIndex to get next chunk index.
    Use ui.chunkSize to get chunk size.

    Code Sample

     
        //Bind after initialization
        $(document).delegate(".selector", "iggridloadondemandrowsrequesting", function (evt, ui) {
            //return browser event
            evt.originalEvent;

            //	Get a reference to the igGridLoadOnDemand widget that fired the event
            ui.owner;

            //	Get a reference to the igGrid widget to which the idGridLoadOnDemand is bound
            ui.owner.grid;

            //	Get the next chunk index
            ui.chunkIndex;

            //	Get the next chunk size
            ui.chunkSize;
        });
        
        //Initialize
        $(".selector").igGrid({
            features: [{
                name: "LoadOnDemand",
                rowsRequesting: function (evt, ui) { ... }
            }]
        });

  • destroy

    .igGridLoadOnDemand( "destroy" );

    Code Sample

     
      $(".selector").igGridLoadOnDemand("destroy");

  • nextChunk

    .igGridLoadOnDemand( "nextChunk" );

    Loads the next chunk of data.

    Code Sample

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

  • ui-iggrid-loadmorebutton

    Classes applied to the load more data button.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.

#