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.
To use the Horizontal Layout Engine, add a reference to horizontallayout.js and initialize the HorizontalLayout object like this:
<!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 | 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" />
<link href="styles.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/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 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== */
