Multiple Fields Binding

This example shows how to combine multiple data fields in one column. The photo, firstName, and lastName data fields are all bound to the Employee column for a nice looking, easy-to-read view.

<p>This example shows how to combine multiple data fields in one column. The <strong>photo</strong>, <strong>firstName</strong>, and <strong>lastName</strong> data fields are all bound to the <strong>Employee</strong> column for a nice looking, easy-to-read view.</p> <p>You bind multiple fields to one column by including them in the column definition, each separated by a comma. When you do so, DataViews will get the values from those fields in the defined column in the order that they appear. In this case, you will see that <strong>employee</strong>, <strong>photo</strong>, <strong>firstName</strong>, <strong>lastName</strong>, <strong>postion</strong>, and <strong>phone</strong> are all defined, but only the <strong>Employee</strong>, <strong>Position</strong> and <strong>Phone</strong> columns are presented.</p> <p>Notice that the column header cells and row cells presenters are customized and use different vertical centering techniques.</p>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/Columns/MultipleFieldsBinding/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="columns, data, binding" /> <meta name="description" content="This example shows how to combine multiple data fields in one column. The **photo**, **firstName**, and **lastName** data fields are all bound to the **Employee** column for a nice looking, easy-to-read view." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Multiple Fields Binding | 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 id="grid" class="grid"></div> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </body> </html>
var photoPresenter = '<img class="employee-photo" src={{=it.photo}} />'; var cols = [ { id: 'employee', caption: 'Employee', dataField: 'firstName,lastName', presenter: ''.concat(photoPresenter, '&nbsp;{{=it.firstName}} {{=it.lastName}}'), showMenu: true, }, { id: 'photo', dataField: 'photo', presenter: photoPresenter, visible: false, }, { id: 'firstName', dataField: 'firstName', visible: false, }, { id: 'lastName', dataField: 'lastName', visible: false, }, { id: 'position', caption: 'Position', dataField: 'position', }, { id: 'phone', caption: 'Phone', dataField: 'phone', }, ]; new GC.DataViews.DataView( document.getElementById('grid'), data, cols, new GC.DataViews.GridLayout({ rowHeight: 40, colHeaderHeight: 40, }) );
var SITE_ROOT = window.process.env.SITE_ROOT; var data = []; for (var i = 0, len = 100; i < len; i++) { data.push({ firstName: 'Daryl', lastName: 'Sweeney', photo: SITE_ROOT + '/images/ds.jpg', position: 'CEO', phone: '(555)924-9726', }); data.push({ firstName: 'Guy', lastName: 'Wooten', photo: SITE_ROOT + '/images/gw.jpg', position: 'CTO', phone: '(438)738-4935', }); data.push({ firstName: 'Buffy', lastName: 'Weber', photo: SITE_ROOT + '/images/bw.jpg', position: 'VP. Engineering', phone: '(699)924-9726', }); data.push({ firstName: 'Hyacinth', lastName: 'Hood', photo: SITE_ROOT + '/images/hh.jpg', position: 'Team Lead', phone: '(889)924-9726', }); data.push({ firstName: 'Akeem', lastName: 'Carr', photo: SITE_ROOT + '/images/ac.jpg', position: 'Software Developer', phone: '(738)924-9726', }); }
.grid { height: 100%; } .employee-photo { border: solid 2px #e0e0e0; border-radius: 50%; height: 32px; margin-left: 5px; width: 32px; } .gc-cell { line-height: 32px; } .gc-cell img { vertical-align: middle; } .gc-cell div { display: inline-block; margin-left: 2px; vertical-align: middle; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0NvbHVtbnMvTXVsdGlwbGVGaWVsZHNCaW5kaW5nL3B1cmVqcy9zdHlsZXMuc2NzcyIsIkZlYXR1cmVzL0NvbHVtbnMvTXVsdGlwbGVGaWVsZHNCaW5kaW5nL3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsWUFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7RUFDQSxrQkFBQTtFQUNBLFlBQUE7RUFDQSxnQkFBQTtFQUNBLFdBQUE7QUNDRjs7QURFQTtFQUNFLGlCQUFBO0FDQ0Y7O0FERUE7RUFDRSxzQkFBQTtBQ0NGOztBREVBO0VBQ0UscUJBQUE7RUFDQSxnQkFBQTtFQUNBLHNCQUFBO0FDQ0YiLCJmaWxlIjoiRmVhdHVyZXMvQ29sdW1ucy9NdWx0aXBsZUZpZWxkc0JpbmRpbmcvcHVyZWpzL3N0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLmVtcGxveWVlLXBob3RvIHtcbiAgYm9yZGVyOiBzb2xpZCAycHggI2UwZTBlMDtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBoZWlnaHQ6IDMycHg7XG4gIG1hcmdpbi1sZWZ0OiA1cHg7XG4gIHdpZHRoOiAzMnB4O1xufVxuXG4uZ2MtY2VsbCB7XG4gIGxpbmUtaGVpZ2h0OiAzMnB4O1xufVxuXG4uZ2MtY2VsbCBpbWcge1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xufVxuXG4uZ2MtY2VsbCBkaXYge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIG1hcmdpbi1sZWZ0OiAycHg7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG59XG4iLCIuZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLmVtcGxveWVlLXBob3RvIHtcbiAgYm9yZGVyOiBzb2xpZCAycHggI2UwZTBlMDtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBoZWlnaHQ6IDMycHg7XG4gIG1hcmdpbi1sZWZ0OiA1cHg7XG4gIHdpZHRoOiAzMnB4O1xufVxuXG4uZ2MtY2VsbCB7XG4gIGxpbmUtaGVpZ2h0OiAzMnB4O1xufVxuXG4uZ2MtY2VsbCBpbWcge1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xufVxuXG4uZ2MtY2VsbCBkaXYge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIG1hcmdpbi1sZWZ0OiAycHg7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG59Il19 */