Horizontal Layout Engine

This example demonstrates the DataViews Horizontal Layout Engine.

<p>This example demonstrates the DataViews Horizontal Layout Engine, which is essentially the same as the Grid Layout Engine except columns are arranged horizontally rather than vertically. In this demo, the row header is disabled and column presenters are used to give the grid a product catalog-like presentation.</p> <p>To use the Horizontal Layout Engine, add a reference to horizontallayout.js and initialize the HorizontalLayout object like this:</p> <pre><code class="hljs js language-js">dataView = <span class="hljs-keyword">new</span> GC.DataViews.DataView( <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'grid'</span>), data, columns, <span class="hljs-keyword">new</span> GC.DataViews.HorizontalLayout({}) ); </code></pre>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/DataViews/Horizontal/HorizontalLayoutEngine/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content="This example demonstrates the DataViews Horizontal Layout Engine." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Horizontal Layout Engine | Data Views | 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" /> <link href="styles.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/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 headerPresenter = '<div style="text-align:center;"><img class="tv-image" src={{=it.image}} /><p style="white-space: normal;">{{=it.description}}</p></div>'; var startPresenter = '<div class="stars-box {{=it.starsIcon}}"></div>'; var cols = [ { id: 'header', caption: '', dataField: 'image,description', presenter: headerPresenter, width: 220, }, { id: 'brand', caption: 'Brand', dataField: 'brand', }, { id: 'price', caption: 'Price', dataField: 'price', format: '$#,##', }, { id: 'size', caption: 'Size (inches)', dataField: 'size', }, { id: 'refreshRate', caption: 'RefreshRate (Hz)', dataField: 'refreshRate', }, { id: 'resolution', caption: 'Resolution', dataField: 'resolution', }, { id: 'starsIcon', caption: 'Stars', dataField: 'starsIcon', presenter: startPresenter, }, ]; var layout = new GC.DataViews.HorizontalLayout({ colHeaderHeight: 150, colWidth: 30, rowHeight: 280, selectionUnit: 'cell', showRowHeader: false, }); new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout); // focus data.view by default document.getElementById('grid').focus();
// TV small dataset var SITE_ROOT = window.process.env.SITE_ROOT; var data = [ { size: 42, refreshRate: 60, resolution: '1080p', price: 399.49, brand: 'LG', starsIcon: 'stars-4-5', starsValue: 4.5, image: SITE_ROOT + '/images/tv1.png', shipToChina: true, description: 'LG Electronics 42LF5600 42-Inch 1080p 60Hz LED TV', }, { size: 32, refreshRate: 60, resolution: '720p', price: 237.99, brand: 'Samsung', starsIcon: 'stars-5', starsValue: 5, image: SITE_ROOT + '/images/tv2.png', shipToChina: false, description: 'Samsung UN32J4000 32-Inch 720p LED TV', }, { size: 22, refreshRate: 60, resolution: '1080p', price: 167.99, brand: 'Samsung', starsIcon: 'stars-4-5', starsValue: 4.5, image: SITE_ROOT + '/images/tv3.png', shipToChina: false, description: 'Samsung UN22F5000 22-Inch 1080p 60Hz LED HDTV (2013 Model)', }, { size: 42, refreshRate: 60, resolution: '1080p', price: 499.99, brand: 'LG', starsIcon: 'stars-3', starsValue: 3, image: SITE_ROOT + '/images/tv4.png', shipToChina: false, description: 'LG 42LB5600 42-Inch TV (2014 Model)', }, ];
.stars-box { background-image: url("/dataviewsjs/demos/images/star-ratings.png"); display: inline-block; height: 13px; overflow: hidden; vertical-align: middle; width: 65px; } .stars-3 { background-position: -26px 0; } .stars-4-5 { background-position: 0 -19px; } .stars-5 { background-position: 0 0; } .gc-column-header-cell.c0 { background: #fff; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9Ib3Jpem9udGFsL0hvcml6b250YWxMYXlvdXRFbmdpbmUvcHVyZWpzL3N0eWxlcy5zY3NzIiwiRGF0YVZpZXdzL0hvcml6b250YWwvSG9yaXpvbnRhbExheW91dEVuZ2luZS9wdXJlanMvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLG1FQUFBO0VBQ0EscUJBQUE7RUFDQSxZQUFBO0VBQ0EsZ0JBQUE7RUFDQSxzQkFBQTtFQUNBLFdBQUE7QUNDRjs7QURFQTtFQUNFLDRCQUFBO0FDQ0Y7O0FERUE7RUFDRSw0QkFBQTtBQ0NGOztBREVBO0VBQ0Usd0JBQUE7QUNDRjs7QURFQTtFQUNFLGdCQUFBO0FDQ0YiLCJmaWxlIjoiRGF0YVZpZXdzL0hvcml6b250YWwvSG9yaXpvbnRhbExheW91dEVuZ2luZS9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5zdGFycy1ib3gge1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJy9kYXRhdmlld3Nqcy9kZW1vcy9pbWFnZXMvc3Rhci1yYXRpbmdzLnBuZycpO1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGhlaWdodDogMTNweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgd2lkdGg6IDY1cHg7XG59XG5cbi5zdGFycy0zIHtcbiAgYmFja2dyb3VuZC1wb3NpdGlvbjogLTI2cHggMDtcbn1cblxuLnN0YXJzLTQtNSB7XG4gIGJhY2tncm91bmQtcG9zaXRpb246IDAgLTE5cHg7XG59XG5cbi5zdGFycy01IHtcbiAgYmFja2dyb3VuZC1wb3NpdGlvbjogMCAwO1xufVxuXG4uZ2MtY29sdW1uLWhlYWRlci1jZWxsLmMwIHtcbiAgYmFja2dyb3VuZDogI2ZmZjtcbn1cbiIsIi5zdGFycy1ib3gge1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoXCIvZGF0YXZpZXdzanMvZGVtb3MvaW1hZ2VzL3N0YXItcmF0aW5ncy5wbmdcIik7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgaGVpZ2h0OiAxM3B4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICB3aWR0aDogNjVweDtcbn1cblxuLnN0YXJzLTMge1xuICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAtMjZweCAwO1xufVxuXG4uc3RhcnMtNC01IHtcbiAgYmFja2dyb3VuZC1wb3NpdGlvbjogMCAtMTlweDtcbn1cblxuLnN0YXJzLTUge1xuICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAwIDA7XG59XG5cbi5nYy1jb2x1bW4taGVhZGVyLWNlbGwuYzAge1xuICBiYWNrZ3JvdW5kOiAjZmZmO1xufSJdfQ== */