Live Loading

This example showcases DataViews support for live loading, which is a feature in which grid rows are loaded as they are scrolled into view.

<p>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 <strong>Infinite Scrolling</strong>, with the exception that data isn't even loaded until it is needed.</p> <p>To enable Live Loading, set the <strong>loadOnDemand</strong> grid property to <strong>true</strong> and provide a <strong>dataSource</strong> object as the data. The dataSource object should provide a loadRange function and Spread.Views will call it when it needs more data. Set <strong>loadOnDemand</strong> to <strong>false</strong> until all data has been loaded.</p> <p><span style="color:#c7254e;font-style:italic;">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.</span></p>
<!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 | GrapeCity 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" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <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: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </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"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <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.'); } }, }); }, };