This example demonstrates how easy it is to define a row template with HTML syntax. In the example a template has been defined to present data rows on multiple lines.
As you can see in the code, you can define the template in the
tag with nested tags.
You apply this template to the view by specifying a unique id in the template tag (rowTmpl in this example)
and referring to it in the grid options object by adding the prefix '#'.
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/RowTemplates/MultipleRow/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="rows, template, row template, rowtemplate" />
<meta
name="description"
content="This example demonstrates how easy it is to define a row template with HTML syntax. In the example a template has been defined to present data rows on multiple lines."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multiple Row | 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" />
<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">
<noscript>You need to enable JavaScript to run this app.</noscript>
<template id="rowTmpl" style="display: none" type="text/dataView-template">
<div style="height: 100%">
<div
class="gc-cell gc-cell-border"
style="
display: inline-block;
vertical-align: top;
width: 80px;
height: 100px;
line-height: 100px;
text-align: center;
"
data-column="id"
data-taborder="0"
></div>
<div style="display: inline-block; vertical-align: top; height: 100%" data-column-group>
<div style="height: 33px; line-height: 33px" data-column-group>
<div
class="gc-cell gc-cell-border"
style="display: inline-block; width: 200px; height: 100%; line-height: 33px"
data-column="name"
data-taborder="1"
></div>
<div
class="gc-cell gc-cell-border"
style="display: inline-block; width: 187px; height: 100%; line-height: 33px"
data-column="sku"
data-taborder="2"
></div>
</div>
<div style="height: 34px; line-height: 34px" data-column-group>
<div
class="gc-cell gc-cell-border"
style="display: inline-block; line-height: 34px; height: 100%; width: 200px"
data-column="quantityPerUnit"
data-taborder="3"
></div>
<div
class="gc-cell gc-cell-border"
style="display: inline-block; line-height: 34px; height: 100%; width: 187px; text-align: left"
data-column="price"
data-taborder="4"
></div>
</div>
<div
class="gc-cell gc-cell-border"
style="height: 33px; line-height: 33px; width: 387px"
data-column="description"
data-taborder="5"
></div>
</div>
<div style="display: inline-block; vertical-align: top; height: 100%" data-column-group>
<div
class="gc-cell gc-cell-border"
style="height: 33px; line-height: 33px; width: 120px; text-align: center"
data-column="inStock"
data-taborder="6"
></div>
<div
class="gc-cell gc-cell-border"
style="height: 34px; line-height: 34px; width: 120px; text-align: center"
data-column="reorderLevel"
data-taborder="7"
></div>
<div
class="gc-cell gc-cell-border"
style="height: 33px; line-height: 33px; width: 120px; text-align: center"
data-column="unitsOnOrder"
data-taborder="8"
></div>
</div>
<div style="display: inline-block; vertical-align: top; height: 100%" data-column-group>
<div
class="gc-cell gc-cell-border"
style="height: 33px; line-height: 33px; width: 200px"
data-column="supplier"
data-taborder="9"
></div>
<div
class="gc-cell gc-cell-border"
style="height: 34px; line-height: 34px; width: 200px"
data-column="location"
data-taborder="10"
></div>
<div
class="gc-cell gc-cell-border"
style="height: 33px; line-height: 33px; width: 200px"
data-column="telephone"
data-taborder="11"
></div>
</div>
<div
class="gc-cell gc-cell-border"
style="
display: inline-block;
vertical-align: top;
height: 100px;
line-height: 100px;
width: 110px;
text-align: center;
"
data-column="discontinued"
data-taborder="12"
></div>
</div>
</template>
<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 colFormatter = '<span>{{? it.discontinued}}✔{{??}}✖{{?}}</span>';
var cols = [
{
id: 'id',
caption: 'ID',
dataField: 'ProductID',
},
{
id: 'name',
caption: 'Name',
dataField: 'ProductName',
},
{
id: 'sku',
caption: 'Category',
dataField: 'Category.CategoryName',
},
{
id: 'description',
caption: 'Description',
dataField: 'Category.Description',
},
{
id: 'quantityPerUnit',
caption: 'Quantity Per Unit',
dataField: 'QuantityPerUnit',
},
{
id: 'inStock',
caption: 'In Stock',
dataField: 'UnitsInStock',
},
{
id: 'price',
caption: 'Unit Price',
dataField: 'UnitPrice',
},
{
id: 'discontinued',
caption: 'Discontinued',
dataField: 'Discontinued',
presenter: colFormatter,
},
{
id: 'reorderLevel',
caption: 'Reorder Level',
dataField: 'ReorderLevel',
},
{
id: 'unitsOnOrder',
caption: 'Units on order',
dataField: 'UnitsOnOrder',
},
{
id: 'supplier',
caption: 'Supplier',
dataField: 'Supplier.CompanyName',
},
{
id: 'location',
caption: 'Address',
dataField: 'Supplier.Address',
},
{
id: 'telephone',
caption: 'Telephone',
dataField: 'Supplier.Telephone',
},
];
new GC.DataViews.DataView(
document.getElementById('grid'),
data,
cols,
new GC.DataViews.GridLayout({
rowHeight: 100,
colHeaderHeight: 100,
rowTemplate: '#rowTmpl',
})
); // focus data.view by default
document.getElementById('grid').focus();
var data = [
{
ProductID: 1,
ProductName: 'Chai',
QuantityPerUnit: '10 boxes x 20 bags',
UnitPrice: 18.0,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryId: 1,
CategoryName: 'Beverages',
Description: 'Soft drinks, coffees, teas, beers, and ales',
},
Supplier: {
CompanyName: 'Exotic Liquids',
Address: '6649 N Blue Gum St',
Telephone: '504-621-8927',
},
},
{
ProductID: 2,
ProductName: 'Chang',
QuantityPerUnit: '24 - 12 oz bottles',
UnitPrice: 19.0,
UnitsInStock: 17,
UnitsOnOrder: 40,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryId: 1,
CategoryName: 'Beverages',
Description: 'Soft drinks, coffees, teas, beers, and ales',
},
Supplier: {
CompanyName: 'Exotic Liquids',
Address: '6649 N Blue Gum St',
Telephone: '504-621-8927',
},
},
{
ProductID: 3,
ProductName: 'Aniseed Syrup',
QuantityPerUnit: '12 - 550 ml bottles',
UnitPrice: 10.0,
UnitsInStock: 13,
UnitsOnOrder: 70,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryId: 2,
CategoryName: 'Condiments',
Description: 'Sweet and savory sauces, relishes, spreads, and seasonings',
},
Supplier: {
CompanyName: 'Exotic Liquids',
Address: '6649 N Blue Gum St',
Telephone: '504-621-8927',
},
},
{
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
QuantityPerUnit: '48 - 6 oz jars',
UnitPrice: 22.0,
UnitsInStock: 53,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 2,
CategoryName: 'Condiments',
Description: 'Sweet and savory sauces, relishes, spreads, and seasonings',
},
Supplier: {
CompanyName: 'New Orleans Cajun Delights',
Address: '4 B Blue Ridge Blvd',
Telephone: '810-292-9388',
},
},
{
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
QuantityPerUnit: '36 boxes',
UnitPrice: 21.35,
UnitsInStock: 0,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: true,
Category: {
CategoryId: 2,
CategoryName: 'Condiments',
Description: 'Sweet and savory sauces, relishes, spreads, and seasonings',
},
Supplier: {
CompanyName: 'New Orleans Cajun Delights',
Address: '4 B Blue Ridge Blvd',
Telephone: '810-292-9388',
},
},
{
ProductID: 6,
ProductName: "Grandma's Boysenberry Spread",
QuantityPerUnit: '12 - 8 oz jars',
UnitPrice: 25.0,
UnitsInStock: 120,
UnitsOnOrder: 0,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryId: 2,
CategoryName: 'Condiments',
Description: 'Sweet and savory sauces, relishes, spreads, and seasonings',
},
Supplier: {
CompanyName: "Grandma Kelly's Homestead",
Address: '8 W Cerritos Ave #54',
Telephone: '856-636-8749',
},
},
{
ProductID: 7,
ProductName: "Uncle Bob's Organic Dried Pears",
QuantityPerUnit: '12 - 1 lb pkgs.',
UnitPrice: 30.0,
UnitsInStock: 15,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryId: 3,
CategoryName: 'Produce',
Description: 'Dried fruit and bean curd',
},
Supplier: {
CompanyName: "Grandma Kelly's Homestead",
Address: '8 W Cerritos Ave #54',
Telephone: '856-636-8749',
},
},
{
ProductID: 8,
ProductName: 'Northwoods Cranberry Sauce',
QuantityPerUnit: '12 - 12 oz jars',
UnitPrice: 40.0,
UnitsInStock: 6,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 2,
CategoryName: 'Condiments',
Description: 'Sweet and savory sauces, relishes, spreads, and seasonings',
},
Supplier: {
CompanyName: "Grandma Kelly's Homestead",
Address: '8 W Cerritos Ave #54',
Telephone: '856-636-8749',
},
},
{
ProductID: 9,
ProductName: 'Mishi Kobe Niku',
QuantityPerUnit: '18 - 500 g pkgs.',
UnitPrice: 97.0,
UnitsInStock: 29,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: true,
Category: {
CategoryId: 4,
CategoryName: 'Meat/Poultry',
Description: 'Prepared meats',
},
Supplier: {
CompanyName: 'Tokyo Traders',
Address: '3 Mcauley Dr',
Telephone: '419-503-2484',
},
},
{
ProductID: 10,
ProductName: 'Ikura',
QuantityPerUnit: '12 - 200 ml jars',
UnitPrice: 31.0,
UnitsInStock: 31,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 5,
CategoryName: 'Seafood',
Description: 'Seaweed and fish',
},
Supplier: {
CompanyName: 'Tokyo Traders',
Address: '3 Mcauley Dr',
Telephone: '419-503-2484',
},
},
{
ProductID: 11,
ProductName: 'Queso Cabrales',
QuantityPerUnit: '1 kg pkg.',
UnitPrice: 21.0,
UnitsInStock: 22,
UnitsOnOrder: 30,
ReorderLevel: 30,
Discontinued: false,
Category: {
CategoryId: 6,
CategoryName: 'Dairy Products',
Description: 'Cheeses',
},
Supplier: {
CompanyName: "Cooperativa de Quesos 'Las Cabras'",
Address: '322 New Horizon Blvd',
Telephone: '414-661-9598',
},
},
{
ProductID: 12,
ProductName: 'Queso Manchego La Pastora',
QuantityPerUnit: '10 - 500 g pkgs.',
UnitPrice: 38.0,
UnitsInStock: 86,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 6,
CategoryName: 'Dairy Products',
Description: 'Cheeses',
},
Supplier: {
CompanyName: "Cooperativa de Quesos 'Las Cabras'",
Address: '322 New Horizon Blvd',
Telephone: '414-661-9598',
},
},
{
ProductID: 13,
ProductName: 'Konbu',
QuantityPerUnit: '2 kg box',
UnitPrice: 6.0,
UnitsInStock: 24,
UnitsOnOrder: 0,
ReorderLevel: 5,
Discontinued: false,
Category: {
CategoryId: 5,
CategoryName: 'Seafood',
Description: 'Seaweed and fish',
},
Supplier: {
CompanyName: "Mayumi's",
Address: '6 S 33rd St',
Telephone: '610-545-3615',
},
},
{
ProductID: 14,
ProductName: 'Tofu',
QuantityPerUnit: '40 - 100 g pkgs.',
UnitPrice: 23.25,
UnitsInStock: 35,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 3,
CategoryName: 'Produce',
Description: 'Dried fruit and bean curd',
},
Supplier: {
CompanyName: "Mayumi's",
Address: '6 S 33rd St',
Telephone: '610-545-3615',
},
},
{
ProductID: 15,
ProductName: 'Genen Shouyu',
QuantityPerUnit: '24 - 250 ml bottles',
UnitPrice: 15.5,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 5,
Discontinued: false,
Category: {
CategoryId: 2,
CategoryName: 'Condiments',
Description: 'Sweet and savory sauces, relishes, spreads, and seasonings',
},
Supplier: {
CompanyName: "Mayumi's",
Address: '6 S 33rd St',
Telephone: '610-545-3615',
},
},
{
ProductID: 16,
ProductName: 'Pavlova',
QuantityPerUnit: '32 - 500 g boxes',
UnitPrice: 17.45,
UnitsInStock: 29,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryId: 8,
CategoryName: 'Confections',
Description: 'Desserts, candies, and sweet breads',
},
Supplier: {
CompanyName: 'Pavlova, Ltd.',
Address: '86 Nw 66th St #8673',
Telephone: '913-388-2079',
},
},
{
ProductID: 17,
ProductName: 'Alice Mutton',
QuantityPerUnit: '20 - 1 kg tins',
UnitPrice: 39.0,
UnitsInStock: 0,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: true,
Category: {
CategoryId: 4,
CategoryName: 'Meat/Poultry',
Description: 'Prepared meats',
},
Supplier: {
CompanyName: 'Pavlova, Ltd.',
Address: '86 Nw 66th St #8673',
Telephone: '913-388-2079',
},
},
{
ProductID: 18,
ProductName: 'Carnarvon Tigers',
QuantityPerUnit: '16 kg pkg.',
UnitPrice: 62.5,
UnitsInStock: 42,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 5,
CategoryName: 'Seafood',
Description: 'Seaweed and fish',
},
Supplier: {
CompanyName: 'Pavlova, Ltd.',
Address: '86 Nw 66th St #8673',
Telephone: '913-388-2079',
},
},
{
ProductID: 19,
ProductName: 'Teatime Chocolate Biscuits',
QuantityPerUnit: '10 boxes x 12 pieces',
UnitPrice: 9.2,
UnitsInStock: 25,
UnitsOnOrder: 0,
ReorderLevel: 5,
Discontinued: false,
Category: {
CategoryId: 8,
CategoryName: 'Confections',
Description: 'Desserts, candies, and sweet breads',
},
Supplier: {
CompanyName: 'Specialty Biscuits, Ltd.',
Address: '74874 Atlantic Ave',
Telephone: '614-801-9788',
},
},
{
ProductID: 20,
ProductName: "Sir Rodney's Marmalade",
QuantityPerUnit: '30 gift boxes',
UnitPrice: 81.0,
UnitsInStock: 40,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 8,
CategoryName: 'Confections',
Description: 'Desserts, candies, and sweet breads',
},
Supplier: {
CompanyName: 'Specialty Biscuits, Ltd.',
Address: '74874 Atlantic Ave',
Telephone: '614-801-9788',
},
},
];
.gc-row .c0 {
font-size: 25px;
}
.gc-row {
font-size: 12px;
}
.gc-row .c1 {
font-weight: bold;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL1Jvd1RlbXBsYXRlcy9NdWx0aXBsZVJvdy9wdXJlanMvc3R5bGVzLnNjc3MiLCJGZWF0dXJlcy9Sb3dUZW1wbGF0ZXMvTXVsdGlwbGVSb3cvcHVyZWpzL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxlQUFBO0FDQ0Y7O0FERUE7RUFDRSxlQUFBO0FDQ0Y7O0FERUE7RUFDRSxpQkFBQTtBQ0NGIiwiZmlsZSI6IkZlYXR1cmVzL1Jvd1RlbXBsYXRlcy9NdWx0aXBsZVJvdy9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5nYy1yb3cgLmMwIHtcbiAgZm9udC1zaXplOiAyNXB4O1xufVxuXG4uZ2Mtcm93IHtcbiAgZm9udC1zaXplOiAxMnB4O1xufVxuXG4uZ2Mtcm93IC5jMSB7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xufVxuIiwiLmdjLXJvdyAuYzAge1xuICBmb250LXNpemU6IDI1cHg7XG59XG5cbi5nYy1yb3cge1xuICBmb250LXNpemU6IDEycHg7XG59XG5cbi5nYy1yb3cgLmMxIHtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG59Il19 */