Ignite UI API Reference
ui.igGridLoadOnDemand
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
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.
-
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" );
Destroys the load on demand widget.
Code Sample
$(".selector").igGridLoadOnDemand("destroy");
-
nextChunk
- .igGridLoadOnDemand( "nextChunk" );
Loads the next chunk of data.
Code Sample
$(".selector").igGridLoadOnDemand("nextChunk");