ui.igGridAppendRowsOnDemand

ui.igGridAppendRowsOnDemand_image

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

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

  • 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

    Type:
    string
    Default:
    ""

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

    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");

  • 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

        • owner
          Type:Object

          Gets a reference to igGridAppendRowsOnDemand.

        • owner.grid
          Type:Object

          Gets a reference to igGrid.

        • chunkIndex
          Type:Number

          Gets the next chunk index.

        • chunkSize
          Type:Number

          Gets the chunk size.

        • rows
          Type:Array

          Gets the requested rows.

    Code Sample

     
				//Bind after initialization
				$(document).delegate(".selector", "iggridappendrowsondemandrowsrequested", 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

        • owner
          Type:Object

          Gets a reference to igGridAppendRowsOnDemand.

        • owner.grid
          Type:Object

          Gets a reference to igGrid.

        • chunkIndex
          Type:Number

          Gets the next chunk index.

        • chunkSize
          Type:Number

          Gets the chunk size.

    Code Sample

     
				//Bind after initialization
				$(document).delegate(".selector", "iggridappendrowsondemandrowsrequesting", 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) { ... }
					}]
				});

  • 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");
The current widget has no css classes.

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