LiveScrolling Tutorial

LiveScrolling is the ability to scroll through and edit large datasets (thousands or millions of records) in real-time in a browser without noticeable performance impacts. Livescrolling is supported in both Static and Databound modes. In Static (or unbound) mode you can provide the Grid a large XML document, and it will apply the livescrolling technique to improve the runtime performance for the user.

LiveScrolling works by retrieving blocks of records as they are needed, instead of having them all in memory at once. The blocks are retrieved via Ajax requests, or by polling a resident data island and rendering those rows on-demand.

Static LiveScrolling

You can bind a data island stored on the page within the HTML to a livescrolling grid. The advantage is that with larger datasets (hundreds to thousands of rows) the grid will be faster and users will have more seamless access to the data. A more detailed explanation of static databinding can be found here.

Assuming you've already set up your page for a Grid (if you don't know how to do this, refer to this article), you can proceed by putting a grid tag somewhere on your page and set the mode to locallivescrolling.

<ntb:grid id="LiveScrollingGrid1"
width="630"
height="200"
mode="locallivescrolling"
datasourceid="mydata"
toolbarenabled="false">

<ntb:datasources>
<ntb:datasource id="mydata">
  <ntb:datasourcestructure
    FieldNames="ContactName|ContactEmail|JobTitle"
    Keys="ContactName"
    types="text|text|text"
    defaults="John Doe|[email protected]|Manager">
  </ntb:datasourcestructure>

  <ntb:data>
   <ntb:e xi="0" a="Tammara Farley" b="[email protected]" c="Director"> </ntb:e>
   <ntb:e xi="1" a="Dwana Barton" b="[email protected]" c="Analyst"> </ntb:e>
   <ntb:e xi="2" a="Steve Irwin" b="[email protected]" c="guide"> </ntb:e>
   
  </ntb:data>
</ntb:datasource>
</ntb:datasources>

</ntb:grid>

This grid will reference the data island with the id "mydata". This data is contained in an XML block further down in the ntb:datasources block. In ntb:datasourcestructure we define the FieldNames (like database columns), the primary key(s) in keys, and types and defaults are optional fields.

Record data is stored in the ntb:data block and the order of this data is contained in the xi field. Note: xi is not a primary key, but a row number beginning at 0. The actual fields of data corresponding to FieldNames are labeled alphabetically beginning with a="" b="" c="" and so-on. After z="" they continue on with aa="" ab="" ac="", etc.

Ajax LiveScrolling

To perform LiveScrolling on a remote dataset with Ajax we define a gethandler instead of a datasourceid. The gethandler refers to a document on the server (probably a PHP, or ASP script, or a servelet of some kind) that outputs an XML island of it's own. We also define a savehandler for saving. A more complete discussion of Ajax databinding in grid can be found here.

StartRecordIndex - Which record (ordinally) to start returning data on.
PageSize - How many records to return
SortColumn - Which is the currently sorted column (could be blank)
SortDirection - (Asc or Desc) The direction of sorting
TableId - The datatable being used (by default is _default)

LiveScrolling gethandlers and savehandlers are exactly the same as those for Paging mode.

Below is an example of a databound grid tag with gethandler and savehandler.

  <ntb:grid id="LiveScrollingGrid2"
       width="630"
       height="200"
       mode="livescrolling"
       autosaveenabled="true"
       keygenerator="GetNewRecordID()"
       gethandler="load_data.asp"
       savehandler="save_data.asp"
       toolbarenabled="true">
  </ntb:grid>

Click on the following links to to read about how to make a gethandler and savehandler in different platforms:

Classic ASP: getHandler, saveHandler
PHP 4, 5+: getHandler, saveHandler
J2EE: getHandler, saveHandler
Coldfusion MX

View Printable Version

Nitobi Product Knowledgebase