This example showcases DataViews support for live loading, which is a feature in which grid rows are loaded as they are scrolled into view. This is similar to Infinite Scrolling, with the exception that data isn't even loaded until it is needed.
To enable Live Loading, set the loadOnDemand grid property to true and provide a dataSource object as the data.
The dataSource object should provide a loadRange function and Spread.Views will call it when it needs more data. Set loadOnDemand to false until all data has been loaded.
This demo calls some API items from the internet, make sure your internet connection is working and runing this demo with HTTP or HTTPS protocol.
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/DataBinding/LiveLoading/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="data, scrolling, load on demand, ondemand" />
<meta
name="description"
content="This example showcases DataViews support for live loading, which is a feature in which grid rows are loaded as they are scrolled into view."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Live Loading | Features | MESCIUS DataViewsJS JavaScript Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'purejs',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="grid" class="grid"></div>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
var cols = [
{
id: 'id',
caption: 'Order Id',
dataField: 'Transaction_Id',
dataType: 'number',
width: 80,
},
{
id: 'date',
caption: 'Date',
dataField: 'Transaction_Date',
dataType: 'date',
format: 'mm/dd/yyyy',
width: 95,
},
{
id: 'product',
caption: 'Product',
dataField: 'Product',
width: 280,
},
{
id: 'price',
caption: 'Price',
dataField: 'Price',
dataType: 'number',
width: 60,
},
{
id: 'quantity',
caption: 'Qty',
dataField: 'Quantity',
dataType: 'number',
width: 45,
},
{
id: 'paymentType',
caption: 'Payment',
dataField: 'Payment_Type',
width: 95,
},
{
id: 'name',
caption: 'Name',
dataField: 'Name',
width: 120,
},
{
id: 'city',
caption: 'City',
dataField: 'City',
width: 125,
},
{
id: 'state',
caption: 'State',
dataField: 'State',
width: 105,
},
{
id: 'country',
caption: 'Country',
dataField: 'Country',
width: 125,
},
{
id: 'detail',
caption: 'Detail',
dataField: 'Product_Detail',
width: '*',
minWidth: 300,
},
];
var layout = new GC.DataViews.GridLayout({
colWidth: 80,
rowHeight: 36,
loadOnDemand: true,
selectionMode: 'none',
});
new GC.DataViews.DataView(document.getElementById('grid'), dataSource, cols, layout);
var index = 0;
var count = 60;
function getUrl(i, c) {
return ''.concat(process.env.SITE_ROOT, '/remotedata/api/records?start=').concat(i, '&count=').concat(c);
}
var dataSource = {
loadRange: function loadRange(params) {
$.ajax({
url: getUrl(index, count),
crossDomain: true,
success: function success(result) {
params.start = index;
params.size = count;
var currentData = result.m_Item2;
var totalItemCount = result.m_Item1;
params.success(currentData);
if (index >= totalItemCount) {
// TODO automatic completion of infinite loading (loadOnDemand = false)
var dataView = GC.DataViews.DataView.getControlByElement(document.body);
dataView.options.loadOnDemand = false;
}
index += count;
},
error: function error(xhr, status) {
params.failed();
if (status !== 'abort') {
alert('Failed to load data from remote web site.');
}
},
});
},
};
