Multiple Row

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.

<p>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.</p> <p>As you can see in the code, you can define the template in the <strong><code>&lt;template&gt;</code></strong> tag with nested <strong><code>&lt;div&gt;</code></strong> tags. You apply this template to the view by specifying a unique id in the template tag (<strong>rowTmpl</strong> in this example) and referring to it in the grid options object by adding the prefix '<strong>#</strong>'.</p>
<!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" /> <!-- 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> <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 */