TWebContinuousScroll

Description

The TWebContinuousScroll control offers the often used functionality in modern web client applications to show lists of items filling the viewing area of the browser only and after this, only load additional items when the user decides to scroll down. The reasoning behind such UI control is simple. By loading only the items in view, the initial display of the page is very fast and only when the user wants to see additional items, extra items are loaded asynchronously in the list.

The TWebContinuousScroll works by requesting page per page of items for the list from the server. The server is expected to return the items as an array of JSON objects. Each JSON object is then rendered as an item in the list. The request URL per page is set via an event. The component will perform the HTTP request and will then trigger an event for each JSON object in the array to render it as an item. Additional events are offered in case the server responds in a different way than returning an array of JSON objects.

Properties for TWebContinuousScroll

Property	Description
ButtonText	When the LoadType is ltButton, then a button is displayed at the bottom of the list from where a click will load extra items. ButtonText sets the caption of this button
ElementButtonClassName	Optionally sets the CSS classname for the load button when styling via CSS is used
ElementButtonClassName	Optionally sets the CSS classname for the information displayed at the end of the list when no more items can be loaded when styling via CSS is used
ElementLoadClassName	Optionally sets the CSS classname for the label when styling via CSS is used.
ItemTemplate	Sets the HTML template for filling the item content when it gets loaded. Data placeholders are added in the HTML template as (%placeholdername%)
ListEndText	Sets the text displayed when the last item is retrieved indicating to the users no more items are on the server
LoadScrollPercent	Sets the value in percent of the scroll range from where automatic loading of extra items should happen when the user is scrolling (when LoadType is set to ltScroll)
LoadType	Sets the way extra items are loaded: ltButton: extra items are loaded when the button at the bottom of the list is clicked ltScroll: extra items are loaded when the user scrolled beyond LoadScrollPercent of the scroll range ltNone: no built-in loading of extra items is happening, extra items are only loaded programmatically
PageNumber	Sets the page number for items to load
PageSize	Sets the number of items per page to load
PostData	Sets the data that is posted along with the page number and item count when a next page of data is requested in mode rmPOST
RequestMode	Sets the HTTP request type to use for fetching a next page of items for the list. This can be a HTTP(s) GET request (rmGET) or a HTTP(s) POST request (rmPOST)
ShowEnd	When true, it is indicated that the end of the list of items is reached
ShowLoading	When true, a progress indicator is shown during the loading of extra items

Methods for TWebContinuousScroll

Method	Description
FetchNextPage	Method will load the next page of extra items in the list

Events for TWebContinuousScroll

Events	Description
OnFetchNextPage	Event triggered when a new page of items needs to be fetched from the server. The URL for the fetch is expected to be returned via the parameter AURL of the event. The event also returns the index of page for which to request items as well as the page size. This should be sufficient to create the URL for most servers to fetch the next list of items.
OnGetData	This event is triggered when the AURL string parameter from OnFetchNextPage remains empty. A TJSArray can be passed as an object array that contains the data to be displayed. If there’s no more data to be displayed, set the ALoadMoreData parameter to False.
OnGetListItem	This event isi triggered for each JSON object returned from the server after requesting a new page. It enables to dynamically render the content per iitem. The event returns the index of the item, the JSON object for the item and the HTML container element for the item in the list. This way, code can be added to the event handler to configure the HTML element childs for the item. Note that when the ItemTemplate contains a data container placeholder identification, i.e. (%placeholdername%), this placeholder data will be set to the value found in the JSON object having the attribute name equal to this placeholder name.
OnGetListItemFieldValue	This event is triggered for each placeholder ID found in the ItemTemplate. This allows not only to transform the value to a display value for the item in the list but also to add placeholders that are dynamically mapped to other values. The placeholder name is returned as AFieldName parameter and the value that will be set as placeholder data is expected to be returned via the AValue var parameter.
OnJSONToItem	This event permits to provide the custom conversion of a JSON object to the HTML to be used for the item in the list. Return this HTML via the var parameter AHTML for the AObject parameter TJSONObject.
OnObjectToArray	In case the JSON returned by the server is not a JSON array but maybe a JSON object with a node containing the array, this event can be used to return the proper node from the returned JSON from the server. The parameter AObject.jsobject is the JSON object returned from the server and the event handler should return the JSON array from this object via the AArray parameter.
OnPageLoaded	This event is triggered when the page has been rendered
after data was retrieved from the server.
OnResponseToArray	This event is triggered returning the raw text data for the server response. In case this data is not formatted as JSON data, it permits to parse the data and return it as a JSON array to the control for rendering.