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 to use different horizontal 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 | 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 photoPresenter = '<img class="employee-photo" src={{=it.photo}} />';
var cols = [
{
id: 'employee',
caption: 'Employee',
dataField: 'firstName,lastName',
presenter: ''.concat(photoPresenter, ' {{=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 */
