Auto Row Height

The row height can be automatically adjusted based on the row's content. This example demonstrates the DataViews automatic row height feature.

<p>The row height can be automatically adjusted based on the row's content. This example demonstrates the DataViews automatic row height feature.</p> <p>In many cases, usually when using images, a grid row needs to be sized to accommodate its content. When you set the <strong>autoRowHeight</strong> property to <strong>true</strong>, DataViews calculates and sets the row height dynamically according to the row's content. This is useful when trying to conserve space on a page, and doesn't require manually setting the height for each row.</p>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/Rows/AutoRowHeight/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="rows, row height, rowheight, autorowheight, auto height" /> <meta name="description" content="The row height can be automatically adjusted based on the row&#x27;s content. This example demonstrates the DataViews automatic row height feature." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Auto Row Height | 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" /> <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 class="main-container"> <div id="grid" class="grid"></div> <div id="total" class="product-total"></div> </div> <script src="locale.js" type="text/javascript"></script> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </body> </html>
var presenter = '<div class="container">' + '<div class="photo"><img src={{=it.photo}} /></div>' + '<div class="name">{{=it.name}}</div>' + '</div>'; var cols = [ { id: 'photo', caption: 'Photo', dataField: 'photo', }, { id: 'name', caption: 'Name', dataField: 'name', }, { id: 'income', caption: 'Income', dataField: 'income', format: '$#,###', }, { id: 'info', dataField: 'photo,name', presenter: presenter, }, ]; var rowTemplate = '<div class="rowDiv" style ="width:100%;height:100%;">\n <div class="productDiv" data-column="info"></div>\n <div class="incomeDiv c2"> <div class="container"> <span class="incomeSpan" data-column="income"></span> </div> </div>\n </div>'; var dataView = new GC.DataViews.DataView( document.getElementById('grid'), data, cols, new GC.DataViews.GridLayout({ autoRowHeight: true, showColHeader: false, showRowHeader: false, selectionMode: 'none', rowTemplate: rowTemplate, }) ); calcTotals(); // focus data.view by default document.getElementById('grid').focus(); function calcTotals() { var sum = dataView.data.evaluate('sum([income])'); var excelFormatter = new GC.DataViews.GeneralFormatter('#,###'); sum = excelFormatter.format(sum); var count = dataView.data.evaluate('count([income])'); var totalPriceSpan = document.getElementById('total'); totalPriceSpan.innerHTML = '<div class="product-total-inner">' .concat(locale.total, ' (') .concat(count, ' ') .concat(locale.items, '): <span>$') .concat(sum, '</span></div>'); }
var SITE_ROOT = window.process.env.SITE_ROOT; var data = [ { photo: SITE_ROOT + '/images/others.png', name: 'Other Products', income: 2641000000, }, { photo: SITE_ROOT + '/images/ipad.png', name: 'iPad', income: 4538000000, }, { photo: SITE_ROOT + '/images/service.png', name: 'Services', income: 5028000000, }, { photo: SITE_ROOT + '/images/mac.png', name: 'Mac', income: 6030000000, }, { photo: SITE_ROOT + '/images/iphone.png', name: 'iPhone', income: 31368000000, }, ];
var locale = { total: 'Total', items: 'items' };
.main-container { height: 380px; width: 100%; } .grid { height: 100%; width: 100%; } .gc-grid { border: 0; } .c2, .c3 { color: #fff; font-size: 22px; } .r0 .c2 { background-color: #603e50; } .r1 .c2 { background-color: #695877; } .r2 .c2 { background-color: #73738e; } .r3 .c2 { background-color: #7c9eaa; } .r4 .c2 { background-color: #8fc8c9; } .r0 .c3 { background-color: #533747; } .r1 .c3 { background-color: #5f506b; } .r2 .c3 { background-color: #6a6b83; } .r3 .c3 { background-color: #76949f; } .r4 .c3 { background-color: #86bbbd; } .rowDiv { display: table; table-layout: fixed; width: 100%; } .productDiv, .incomeDiv { border: 0; display: table-cell; height: 100%; padding: 0.4em 1em; vertical-align: middle; } .incomeSpan { border: 0; display: block; padding: 0; } .photo, .name { display: inline-block; vertical-align: middle; } .photo { margin-right: 1em; position: relative; text-align: center; top: 4px; width: 100px; } .product-total { font-size: 1.2rem; margin-top: 1em; text-align: right; } .product-total .product-total-inner { background: #f1f1f1; border-radius: 24px; color: #333; display: inline-block; padding: 0.4em 1em; } .product-total .product-total-inner span { font-weight: 700; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL1Jvd3MvQXV0b1Jvd0hlaWdodC9wdXJlanMvc3R5bGVzLnNjc3MiLCJGZWF0dXJlcy9Sb3dzL0F1dG9Sb3dIZWlnaHQvcHVyZWpzL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFBO0VBQ0EsV0FBQTtBQ0NGOztBREVBO0VBQ0UsWUFBQTtFQUNBLFdBQUE7QUNDRjs7QURFQTtFQUNFLFNBQUE7QUNDRjs7QURFQTs7RUFFRSxXQUFBO0VBQ0EsZUFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7QUNDRjs7QURFQTtFQUNFLHlCQUFBO0FDQ0Y7O0FERUE7RUFDRSx5QkFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7QUNDRjs7QURFQTtFQUNFLHlCQUFBO0FDQ0Y7O0FERUE7RUFDRSx5QkFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7QUNDRjs7QURFQTtFQUNFLHlCQUFBO0FDQ0Y7O0FERUE7RUFDRSx5QkFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7QUNDRjs7QURFQTtFQUNFLGNBQUE7RUFDQSxtQkFBQTtFQUNBLFdBQUE7QUNDRjs7QURFQTs7RUFFRSxTQUFBO0VBQ0EsbUJBQUE7RUFDQSxZQUFBO0VBQ0Esa0JBQUE7RUFDQSxzQkFBQTtBQ0NGOztBREVBO0VBQ0UsU0FBQTtFQUNBLGNBQUE7RUFDQSxVQUFBO0FDQ0Y7O0FERUE7O0VBRUUscUJBQUE7RUFDQSxzQkFBQTtBQ0NGOztBREVBO0VBQ0UsaUJBQUE7RUFDQSxrQkFBQTtFQUNBLGtCQUFBO0VBQ0EsUUFBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLGlCQUFBO0VBQ0EsZUFBQTtFQUNBLGlCQUFBO0FDQ0Y7QURDRTtFQUNFLG1CQUFBO0VBQ0EsbUJBQUE7RUFDQSxXQUFBO0VBQ0EscUJBQUE7RUFDQSxrQkFBQTtBQ0NKO0FEQ0k7RUFDRSxnQkFBQTtBQ0NOIiwiZmlsZSI6IkZlYXR1cmVzL1Jvd3MvQXV0b1Jvd0hlaWdodC9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMzgwcHg7XG4gIHdpZHRoOiAxMDAlO1xufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG59XG5cbi5nYy1ncmlkIHtcbiAgYm9yZGVyOiAwO1xufVxuXG4uYzIsXG4uYzMge1xuICBjb2xvcjogI2ZmZjtcbiAgZm9udC1zaXplOiAyMnB4O1xufVxuXG4ucjAgLmMyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzYwM2U1MDtcbn1cblxuLnIxIC5jMiB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM2OTU4Nzc7XG59XG5cbi5yMiAuYzIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNzM3MzhlO1xufVxuXG4ucjMgLmMyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzdjOWVhYTtcbn1cblxuLnI0IC5jMiB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM4ZmM4Yzk7XG59XG5cbi5yMCAuYzMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTMzNzQ3O1xufVxuXG4ucjEgLmMzIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzVmNTA2Yjtcbn1cblxuLnIyIC5jMyB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM2YTZiODM7XG59XG5cbi5yMyAuYzMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNzY5NDlmO1xufVxuXG4ucjQgLmMzIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzg2YmJiZDtcbn1cblxuLnJvd0RpdiB7XG4gIGRpc3BsYXk6IHRhYmxlO1xuICB0YWJsZS1sYXlvdXQ6IGZpeGVkO1xuICB3aWR0aDogMTAwJTtcbn1cblxuLnByb2R1Y3REaXYsXG4uaW5jb21lRGl2IHtcbiAgYm9yZGVyOiAwO1xuICBkaXNwbGF5OiB0YWJsZS1jZWxsO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6IDAuNGVtIDFlbTtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLmluY29tZVNwYW4ge1xuICBib3JkZXI6IDA7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwYWRkaW5nOiAwO1xufVxuXG4ucGhvdG8sXG4ubmFtZSB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLnBob3RvIHtcbiAgbWFyZ2luLXJpZ2h0OiAxZW07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICB0b3A6IDRweDtcbiAgd2lkdGg6IDEwMHB4O1xufVxuXG4ucHJvZHVjdC10b3RhbCB7XG4gIGZvbnQtc2l6ZTogMS4ycmVtO1xuICBtYXJnaW4tdG9wOiAxZW07XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xuXG4gIC5wcm9kdWN0LXRvdGFsLWlubmVyIHtcbiAgICBiYWNrZ3JvdW5kOiAjZjFmMWYxO1xuICAgIGJvcmRlci1yYWRpdXM6IDI0cHg7XG4gICAgY29sb3I6ICMzMzM7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIHBhZGRpbmc6IDAuNGVtIDFlbTtcblxuICAgIHNwYW4ge1xuICAgICAgZm9udC13ZWlnaHQ6IDcwMDtcbiAgICB9XG4gIH1cbn1cbiIsIi5tYWluLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMzgwcHg7XG4gIHdpZHRoOiAxMDAlO1xufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG59XG5cbi5nYy1ncmlkIHtcbiAgYm9yZGVyOiAwO1xufVxuXG4uYzIsXG4uYzMge1xuICBjb2xvcjogI2ZmZjtcbiAgZm9udC1zaXplOiAyMnB4O1xufVxuXG4ucjAgLmMyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzYwM2U1MDtcbn1cblxuLnIxIC5jMiB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM2OTU4Nzc7XG59XG5cbi5yMiAuYzIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNzM3MzhlO1xufVxuXG4ucjMgLmMyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzdjOWVhYTtcbn1cblxuLnI0IC5jMiB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM4ZmM4Yzk7XG59XG5cbi5yMCAuYzMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTMzNzQ3O1xufVxuXG4ucjEgLmMzIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzVmNTA2Yjtcbn1cblxuLnIyIC5jMyB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM2YTZiODM7XG59XG5cbi5yMyAuYzMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNzY5NDlmO1xufVxuXG4ucjQgLmMzIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzg2YmJiZDtcbn1cblxuLnJvd0RpdiB7XG4gIGRpc3BsYXk6IHRhYmxlO1xuICB0YWJsZS1sYXlvdXQ6IGZpeGVkO1xuICB3aWR0aDogMTAwJTtcbn1cblxuLnByb2R1Y3REaXYsXG4uaW5jb21lRGl2IHtcbiAgYm9yZGVyOiAwO1xuICBkaXNwbGF5OiB0YWJsZS1jZWxsO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6IDAuNGVtIDFlbTtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLmluY29tZVNwYW4ge1xuICBib3JkZXI6IDA7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwYWRkaW5nOiAwO1xufVxuXG4ucGhvdG8sXG4ubmFtZSB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLnBob3RvIHtcbiAgbWFyZ2luLXJpZ2h0OiAxZW07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICB0b3A6IDRweDtcbiAgd2lkdGg6IDEwMHB4O1xufVxuXG4ucHJvZHVjdC10b3RhbCB7XG4gIGZvbnQtc2l6ZTogMS4ycmVtO1xuICBtYXJnaW4tdG9wOiAxZW07XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xufVxuLnByb2R1Y3QtdG90YWwgLnByb2R1Y3QtdG90YWwtaW5uZXIge1xuICBiYWNrZ3JvdW5kOiAjZjFmMWYxO1xuICBib3JkZXItcmFkaXVzOiAyNHB4O1xuICBjb2xvcjogIzMzMztcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBwYWRkaW5nOiAwLjRlbSAxZW07XG59XG4ucHJvZHVjdC10b3RhbCAucHJvZHVjdC10b3RhbC1pbm5lciBzcGFuIHtcbiAgZm9udC13ZWlnaHQ6IDcwMDtcbn0iXX0= */