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.

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. 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 employee, photo, firstName, lastName, postion, and phone are all defined, but only the Employee, Position and Phone columns are presented. Notice that the column header cells and row cells presenters are customized and use different vertical centering techniques.
<!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: 'GrapeCity-Internal-Use-Only,GrapeCity,E195393772372914#B0KV4Ny56Vr5Wb7w6buJWeGRWb4NXUnNXRlFWWXl6SoN5VzVkYslmQ95WTENkTllVQzd4QhpEejdDNJZlWOp6M7oERQNnWspkaaB5QMhnR7dmUkRnVJR4L5cHTKNkZZdDbRBzZIxmSSR6NrpVQaVUQrBlc6ImYysSd4UlUEZGbw2kMl9UOzQVMId6ZXtUN83CO5RzaZt4VY5kM5pkUGpUUUV7UExUeGpUdTV5dFJ4bPhTc8pGeXJHWrkzNlFzdUtWTr5UQDdVckdGbSVUWr2yMPNzctZVRxEEW9lEbsZHUKJnVaRXT5p6Z0tWMqJGVrtSTIZnaopGSWZXbVNjY0hzQB5We4dnUr3ER8MkI0IyUiwiIGZUNwEkN5MjI0ICSiwSM9ETO6czNygTM0IicfJye#4Xfd5nIZRVV9IiOiMkIsISM6ByUKN7dllmVhRXYEJiOi8kI1tlOiQmcQJCLiEDMzATOwAyMwgDMwIDMyIiOiQncDJCLiI7au26YukHdpNWZwFmcn9iKsAnau26YukHdpNWZwFmcn9iKs86Yu46bj9Se4l6YlBXYydmLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLt36YukHdpNWZwFmcn9iKiojIz5GRiwiI9RXaDVGchJ7RiojIh94QiwSZ5JHd0ICb6VkIsICNxkjM7MjM7czM9MTN9EjI0ICZJJye0ICRiwiI34zZN3yZGNlUnJDe5wkQPVlcBh7SppmUNBlU9dWS7J4ZMRES4MTZkRXTxM7Uq5GeQdHcyFHVup6dQd6ZDpEVrNDSh9kbNdzZrl4dwdPQ', 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 */