Keyboard Navigation | Features | MESCIUS DataViewsJS Angular Demos

This example showcases the support for keyboard navigation in DataViews. The bottom view is navigable and is used to page through the detail cards in the top view. The top view uses the DataViews card layout engine, which is described in the "Card Layout Engine" demo. Keys to this demo: The example uses arrow up/down and page up/down keys to navigate the bottom grid view and fires an event to load data in the top view when focus changes. The allowFocus option is set to true. This allows you to handle the focusRowChanged event when focus changes. The updateData function loads the data into the detail view.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Rows/KeyboardNavigation/angular/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="rows, keyboard" />
<meta name="description" content="This example showcases the support for keyboard navigation in DataViews." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Keyboard Navigation | Features | MESCIUS DataViewsJS Angular 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/css/bootstrap-snippet.min.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="/dataviewsjs/demos/static/dataviews/gc.dataviews.cardlayout.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/angular-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: 'angular',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/systemjs/dist/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<template id="carInfo" style="display: none">
<div class="info-container">
<div data-column="Photo" class="photoInfo"></div>
<table class="carInfo">
<tbody>
<tr>
<td>Displacement</td>
<td data-column="Displacement"></td>
</tr>
<tr>
<td>Horsepower</td>
<td data-column="Horsepower"></td>
</tr>
<tr>
<td>Weight/lbs</td>
<td data-column="Weight_in_lbs"></td>
</tr>
<tr>
<td>Acceleration</td>
<td data-column="Acceleration"></td>
</tr>
</tbody>
</table>
</div>
</template>
<app-root></app-root>
<script type="text/javascript">
System.import('./app.ts');
</script>
</body>
</html>

<div class="main-container">
<div class="section">
<p class="tip">{{ locale.focusRowTip }}</p>
<gc-dataview id="grid2" [data]="data2" [cols]="cols2" [layout]="layout2"></gc-dataview>
<p class="tip">{{ locale.navigateTip }}</p>
</div>
<gc-dataview
id="grid"
[data]="data"
[cols]="cols1"
[layout]="layout1"
(focusChanged)="handleFocusChanged($event)"
autoFocus
></gc-dataview>
</div>

import { Component } from '@angular/core';
import { getControlByElement } from '@grapecity/dataviews.core';
import { GridLayout } from '@grapecity/dataviews.grid';
import CardLayout from '@grapecity/dataviews.cardlayout';
import { data } from './data';
import locale from './locale';
const cols1 = [
{ id: 'Name', caption: 'CarName', dataField: 'Name' },
{ id: 'Year', caption: 'Year', dataField: 'Year' },
{
id: 'Miles_per_Gallon',
caption: 'Miles/Gallon',
dataField: 'Miles_per_Gallon',
},
{ id: 'Cylinders', caption: 'Cylinders', dataField: 'Cylinders' },
];
const layout1 = new GridLayout({
rowHeight: 36,
selectionMode: 'none',
colMinWidth: 120,
});
const photoPresenter = '<img class="photo" src={{=it.Photo}} />';
const cols2 = [
{
id: 'Displacement',
caption: 'Displacement',
dataField: 'Displacement',
width: '*',
},
{
id: 'Horsepower',
caption: 'Horsepower',
dataField: 'Horsepower',
width: '*',
},
{
id: 'Weight_in_lbs',
caption: 'Weight',
dataField: 'Weight_in_lbs',
format: '#,##',
width: '*',
},
{
id: 'Acceleration',
caption: 'Weight',
dataField: 'Acceleration',
width: '*',
},
{
id: 'Origin',
caption: 'Origin',
dataField: 'Origin',
width: '*',
},
{ id: 'Photo', dataField: 'Photo', presenter: photoPresenter },
];
const data2 = [data[0]];
const layout2 = new CardLayout({
cardHeight: 165,
rowTemplate: '#carInfo',
direction: 'horizontal',
});
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
})
export class AppComponent {
locale = locale;
data = data;
data2 = data2;
cols1 = cols1;
cols2 = cols2;
layout1 = layout1;
layout2 = layout2;
handleFocusChanged(e) {
const sourceIndex = e.sourceRow;
if (sourceIndex >= 0) {
const dataView2 = getControlByElement(document.getElementById('grid2'));
dataView2.data.updateItem(0, data[sourceIndex]);
}
}
}

import { NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { DataViewModule } from '@grapecity/dataviews.angular';
// zone.js should be loaded last to fix error 'ZoneAwarePromise has been overwritten'
import 'zone.js';
@NgModule({
declarations: [AppComponent],
imports: [DataViewModule, BrowserModule, FormsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
if (process.env.NODE_ENV === 'production') {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));

// cars
const SITE_ROOT = window.process.env.SITE_ROOT;
export const data = [
{
Name: 'chevrolet chevelle malibu',
Miles_per_Gallon: 18,
Cylinders: 8,
Displacement: 307,
Horsepower: 130,
Weight_in_lbs: 3504,
Acceleration: 12,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletchevellemalibu.jpg',
},
{
Name: 'buick skylark 320',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 350,
Horsepower: 165,
Weight_in_lbs: 3693,
Acceleration: 11.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/buickskylark320.jpg',
},
{
Name: 'plymouth satellite',
Miles_per_Gallon: 18,
Cylinders: 8,
Displacement: 318,
Horsepower: 150,
Weight_in_lbs: 3436,
Acceleration: 11,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/plymouthsatellite.jpg',
},
{
Name: 'amc rebel sst',
Miles_per_Gallon: 16,
Cylinders: 8,
Displacement: 304,
Horsepower: 150,
Weight_in_lbs: 3433,
Acceleration: 12,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/amcrebelsst.jpg',
},
{
Name: 'ford torino',
Miles_per_Gallon: 17,
Cylinders: 8,
Displacement: 302,
Horsepower: 140,
Weight_in_lbs: 3449,
Acceleration: 10.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordtorino.jpg',
},
{
Name: 'ford galaxie 500',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 429,
Horsepower: 198,
Weight_in_lbs: 4341,
Acceleration: 10,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordgalaxie500.jpg',
},
{
Name: 'chevrolet impala',
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 454,
Horsepower: 220,
Weight_in_lbs: 4354,
Acceleration: 9,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletimpala.jpg',
},
{
Name: 'plymouth fury iii',
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 440,
Horsepower: 215,
Weight_in_lbs: 4312,
Acceleration: 8.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/plymouthfuryiii.jpg',
},
{
Name: 'pontiac catalina',
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 455,
Horsepower: 225,
Weight_in_lbs: 4425,
Acceleration: 10,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/pontiaccatalina.jpg',
},
{
Name: 'amc ambassador dpl',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 390,
Horsepower: 190,
Weight_in_lbs: 3850,
Acceleration: 8.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/amcambassadordpl.jpg',
},
{
Name: 'citroen ds-21 pallas',
Miles_per_Gallon: 14,
Cylinders: 4,
Displacement: 133,
Horsepower: 115,
Weight_in_lbs: 3090,
Acceleration: 17.5,
Year: 1970,
Origin: 'B',
Photo: SITE_ROOT + '/images/citroends-21pallas.jpg',
},
{
Name: 'chevrolet chevelle concours (sw)',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 350,
Horsepower: 165,
Weight_in_lbs: 4142,
Acceleration: 11.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletchevelleconcours(sw).jpg',
},
{
Name: 'ford torino (sw)',
Miles_per_Gallon: 16,
Cylinders: 8,
Displacement: 351,
Horsepower: 153,
Weight_in_lbs: 4034,
Acceleration: 11,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordtorino(sw).jpg',
},
{
Name: 'plymouth satellite (sw)',
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 383,
Horsepower: 175,
Weight_in_lbs: 4166,
Acceleration: 10.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/plymouthsatellite(sw).jpg',
},
{
Name: 'amc rebel sst (sw)',
Miles_per_Gallon: 18,
Cylinders: 8,
Displacement: 360,
Horsepower: 175,
Weight_in_lbs: 3850,
Acceleration: 11,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/amcrebelsst(sw).jpg',
},
{
Name: 'dodge challenger se',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 383,
Horsepower: 170,
Weight_in_lbs: 3563,
Acceleration: 10,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/dodgechallengerse.jpg',
},
{
Name: "plymouth 'cuda 340",
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 340,
Horsepower: 160,
Weight_in_lbs: 3609,
Acceleration: 8,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/plymouthcuda340.jpg',
},
{
Name: 'ford mustang boss 302',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 302,
Horsepower: 140,
Weight_in_lbs: 3353,
Acceleration: 8,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordmustangboss302.jpg',
},
{
Name: 'chevrolet monte carlo',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 400,
Horsepower: 150,
Weight_in_lbs: 3761,
Acceleration: 9.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletmontecarlo.jpg',
},
{
Name: 'buick estate wagon (sw)',
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 455,
Horsepower: 225,
Weight_in_lbs: 3086,
Acceleration: 10,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/buickestatewagon(sw).jpg',
},
{
Name: 'toyota corona mark ii',
Miles_per_Gallon: 24,
Cylinders: 4,
Displacement: 113,
Horsepower: 95,
Weight_in_lbs: 2372,
Acceleration: 15,
Year: 1970,
Origin: 'C',
Photo: SITE_ROOT + '/images/toyotacoronamarkii.jpg',
},
{
Name: 'plymouth duster',
Miles_per_Gallon: 22,
Cylinders: 6,
Displacement: 198,
Horsepower: 95,
Weight_in_lbs: 2833,
Acceleration: 15.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/plymouthduster.jpg',
},
{
Name: 'amc hornet',
Miles_per_Gallon: 18,
Cylinders: 6,
Displacement: 199,
Horsepower: 97,
Weight_in_lbs: 2774,
Acceleration: 15.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/amchornet.jpg',
},
{
Name: 'ford maverick',
Miles_per_Gallon: 21,
Cylinders: 6,
Displacement: 200,
Horsepower: 85,
Weight_in_lbs: 2587,
Acceleration: 16,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordmaverick.jpg',
},
{
Name: 'datsun pl510',
Miles_per_Gallon: 27,
Cylinders: 4,
Displacement: 97,
Horsepower: 88,
Weight_in_lbs: 2130,
Acceleration: 14.5,
Year: 1970,
Origin: 'C',
Photo: SITE_ROOT + '/images/datsunpl510.jpg',
},
{
Name: 'volkswagen 1131 deluxe sedan',
Miles_per_Gallon: 26,
Cylinders: 4,
Displacement: 97,
Horsepower: 46,
Weight_in_lbs: 1835,
Acceleration: 20.5,
Year: 1970,
Origin: 'B',
Photo: SITE_ROOT + '/images/volkswagen1131deluxesedan.jpg',
},
{
Name: 'peugeot 504',
Miles_per_Gallon: 25,
Cylinders: 4,
Displacement: 110,
Horsepower: 87,
Weight_in_lbs: 2672,
Acceleration: 17.5,
Year: 1970,
Origin: 'B',
Photo: SITE_ROOT + '/images/peugeot504.jpg',
},
{
Name: 'audi 100 ls',
Miles_per_Gallon: 24,
Cylinders: 4,
Displacement: 107,
Horsepower: 90,
Weight_in_lbs: 2430,
Acceleration: 14.5,
Year: 1970,
Origin: 'B',
Photo: SITE_ROOT + '/images/audi100ls.jpg',
},
{
Name: 'saab 99e',
Miles_per_Gallon: 25,
Cylinders: 4,
Displacement: 104,
Horsepower: 95,
Weight_in_lbs: 2375,
Acceleration: 17.5,
Year: 1970,
Origin: 'B',
Photo: SITE_ROOT + '/images/saab99e.jpg',
},
{
Name: 'bmw 2002',
Miles_per_Gallon: 26,
Cylinders: 4,
Displacement: 121,
Horsepower: 113,
Weight_in_lbs: 2234,
Acceleration: 12.5,
Year: 1970,
Origin: 'B',
Photo: SITE_ROOT + '/images/bmw2002.jpg',
},
{
Name: 'amc gremlin',
Miles_per_Gallon: 21,
Cylinders: 6,
Displacement: 199,
Horsepower: 90,
Weight_in_lbs: 2648,
Acceleration: 15,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/amcgremlin.jpg',
},
{
Name: 'ford f250',
Miles_per_Gallon: 10,
Cylinders: 8,
Displacement: 360,
Horsepower: 215,
Weight_in_lbs: 4615,
Acceleration: 14,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordf250.jpg',
},
{
Name: 'chevy c20',
Miles_per_Gallon: 10,
Cylinders: 8,
Displacement: 307,
Horsepower: 200,
Weight_in_lbs: 4376,
Acceleration: 15,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevyc20.jpg',
},
{
Name: 'dodge d200',
Miles_per_Gallon: 11,
Cylinders: 8,
Displacement: 318,
Horsepower: 210,
Weight_in_lbs: 4382,
Acceleration: 13.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/dodged200.jpg',
},
{
Name: 'hi 1200d',
Miles_per_Gallon: 9,
Cylinders: 8,
Displacement: 304,
Horsepower: 193,
Weight_in_lbs: 4732,
Acceleration: 18.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/hi1200d.jpg',
},
{
Name: 'datsun pl510',
Miles_per_Gallon: 27,
Cylinders: 4,
Displacement: 97,
Horsepower: 88,
Weight_in_lbs: 2130,
Acceleration: 14.5,
Year: 1971,
Origin: 'C',
Photo: SITE_ROOT + '/images/datsunpl510.jpg',
},
{
Name: 'chevrolet vega 2300',
Miles_per_Gallon: 28,
Cylinders: 4,
Displacement: 140,
Horsepower: 90,
Weight_in_lbs: 2264,
Acceleration: 15.5,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletvega2300.jpg',
},
{
Name: 'toyota corona',
Miles_per_Gallon: 25,
Cylinders: 4,
Displacement: 113,
Horsepower: 95,
Weight_in_lbs: 2228,
Acceleration: 14,
Year: 1971,
Origin: 'C',
Photo: SITE_ROOT + '/images/toyotacorona.jpg',
},
{
Name: 'ford pinto',
Miles_per_Gallon: 25,
Cylinders: 4,
Displacement: 98,
Horsepower: null,
Weight_in_lbs: 2046,
Acceleration: 19,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordpinto.jpg',
},
{
Name: 'volkswagen super beetle 117',
Miles_per_Gallon: 24,
Cylinders: 4,
Displacement: 97,
Horsepower: 48,
Weight_in_lbs: 1978,
Acceleration: 20,
Year: 1971,
Origin: 'B',
Photo: SITE_ROOT + '/images/volkswagen1131deluxesedan.jpg',
},
{
Name: 'amc gremlin',
Miles_per_Gallon: 19,
Cylinders: 6,
Displacement: 232,
Horsepower: 100,
Weight_in_lbs: 2634,
Acceleration: 13,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/amcgremlin.jpg',
},
{
Name: 'plymouth satellite custom',
Miles_per_Gallon: 16,
Cylinders: 6,
Displacement: 225,
Horsepower: 105,
Weight_in_lbs: 3439,
Acceleration: 15.5,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/plymouthsatellitecustom.jpg',
},
{
Name: 'chevrolet chevelle malibu',
Miles_per_Gallon: 17,
Cylinders: 6,
Displacement: 250,
Horsepower: 100,
Weight_in_lbs: 3329,
Acceleration: 15.5,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletchevellemalibu.jpg',
},
{
Name: 'ford torino 500',
Miles_per_Gallon: 19,
Cylinders: 6,
Displacement: 250,
Horsepower: 88,
Weight_in_lbs: 3302,
Acceleration: 15.5,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordtorino500.jpg',
},
{
Name: 'amc matador',
Miles_per_Gallon: 18,
Cylinders: 6,
Displacement: 232,
Horsepower: 100,
Weight_in_lbs: 3288,
Acceleration: 15.5,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/amcmatador.jpg',
},
{
Name: 'chevrolet impala',
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 350,
Horsepower: 165,
Weight_in_lbs: 4209,
Acceleration: 12,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletimpala.jpg',
},
];

export default {
focusRowTip: 'Focus row information',
navigateTip: 'Use row up/down or page up/down to navigate the focus row',
};

.main-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.main-container p.tip {
margin: 5px;
}
.section {
flex: 0 1 auto;
}
#grid {
flex: 1 1 auto;
}
#grid2 {
height: 167px;
margin-top: 5px;
width: 400px;
}
#grid2 .gc-grid {
background: #333;
border-color: #333;
border-radius: 4px;
}
.info-container {
display: flex;
flex-direction: row;
}
.photoInfo {
display: inline-block;
height: 165px;
line-height: 165px;
margin: 0;
margin-right: 10px;
padding: 0;
position: relative;
vertical-align: middle;
width: 230px;
}
.photoInfo:before {
border-color: transparent transparent #333 transparent;
border-style: solid;
border-width: 0 0 165px 50px;
content: " ";
height: 0;
left: 180px;
position: absolute;
top: 0;
width: 0;
}
.carInfo {
display: inline-block;
vertical-align: middle;
flex: 1 1 auto;
padding: 0.4em;
}
.carInfo tr {
vertical-align: baseline;
}
.carInfo td {
border-bottom: solid 1px #666;
color: #fff;
padding: 0.4em;
height: 1.25rem;
}
.carInfo td:last-child {
text-align: right;
padding-left: 1em;
}
@media only screen and (max-width: 768px) {
#grid2 {
width: 375px;
}
.photoInfo {
width: 170px;
}
.photoInfo:before {
left: 120px;
}
.carInfo td {
width: auto;
}
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL1Jvd3MvS2V5Ym9hcmROYXZpZ2F0aW9uL2FuZ3VsYXIvc3R5bGVzLnNjc3MiLCJGZWF0dXJlcy9Sb3dzL0tleWJvYXJkTmF2aWdhdGlvbi9hbmd1bGFyL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGFBQUE7RUFDQSxzQkFBQTtBQ0NGO0FEQ0U7RUFDRSxXQUFBO0FDQ0o7O0FER0E7RUFDRSxjQUFBO0FDQUY7O0FER0E7RUFDRSxjQUFBO0FDQUY7O0FER0E7RUFDRSxhQUFBO0VBQ0EsZUFBQTtFQUNBLFlBQUE7QUNBRjs7QURHQTtFQUNFLGdCQUFBO0VBQ0Esa0JBQUE7RUFDQSxrQkFBQTtBQ0FGOztBREdBO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0FDQUY7O0FER0E7RUFDRSxxQkFBQTtFQUNBLGFBQUE7RUFDQSxrQkFBQTtFQUNBLFNBQUE7RUFDQSxrQkFBQTtFQUNBLFVBQUE7RUFDQSxrQkFBQTtFQUNBLHNCQUFBO0VBQ0EsWUFBQTtBQ0FGOztBREdBO0VBQ0Usc0RBQUE7RUFDQSxtQkFBQTtFQUNBLDRCQUFBO0VBQ0EsWUFBQTtFQUNBLFNBQUE7RUFDQSxXQUFBO0VBQ0Esa0JBQUE7RUFDQSxNQUFBO0VBQ0EsUUFBQTtBQ0FGOztBREdBO0VBQ0UscUJBQUE7RUFDQSxzQkFBQTtFQUNBLGNBQUE7RUFDQSxjQUFBO0FDQUY7O0FER0E7RUFDRSx3QkFBQTtBQ0FGOztBREdBO0VBQ0UsNkJBQUE7RUFDQSxXQUFBO0VBQ0EsY0FBQTtFQUNBLGVBQUE7QUNBRjs7QURHQTtFQUNFLGlCQUFBO0VBQ0EsaUJBQUE7QUNBRjs7QURHQTtFQUNFO0lBQ0UsWUFBQTtFQ0FGO0VER0E7SUFDRSxZQUFBO0VDREY7RURJQTtJQUNFLFdBQUE7RUNGRjtFREtBO0lBQ0UsV0FBQTtFQ0hGO0FBQ0YiLCJmaWxlIjoiRmVhdHVyZXMvUm93cy9LZXlib2FyZE5hdmlnYXRpb24vYW5ndWxhci9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm1haW4tY29udGFpbmVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblxuICBwLnRpcCB7XG4gICAgbWFyZ2luOiA1cHg7XG4gIH1cbn1cblxuLnNlY3Rpb24ge1xuICBmbGV4OiAwIDEgYXV0bztcbn1cblxuI2dyaWQge1xuICBmbGV4OiAxIDEgYXV0bztcbn1cblxuI2dyaWQyIHtcbiAgaGVpZ2h0OiAxNjdweDtcbiAgbWFyZ2luLXRvcDogNXB4O1xuICB3aWR0aDogNDAwcHg7XG59XG5cbiNncmlkMiAuZ2MtZ3JpZCB7XG4gIGJhY2tncm91bmQ6ICMzMzM7XG4gIGJvcmRlci1jb2xvcjogIzMzMztcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xufVxuXG4uaW5mby1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xufVxuXG4ucGhvdG9JbmZvIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBoZWlnaHQ6IDE2NXB4O1xuICBsaW5lLWhlaWdodDogMTY1cHg7XG4gIG1hcmdpbjogMDtcbiAgbWFyZ2luLXJpZ2h0OiAxMHB4O1xuICBwYWRkaW5nOiAwO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIHdpZHRoOiAyMzBweDtcbn1cblxuLnBob3RvSW5mbzpiZWZvcmUge1xuICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50IHRyYW5zcGFyZW50ICMzMzMgdHJhbnNwYXJlbnQ7XG4gIGJvcmRlci1zdHlsZTogc29saWQ7XG4gIGJvcmRlci13aWR0aDogMCAwIDE2NXB4IDUwcHg7XG4gIGNvbnRlbnQ6ICcgJztcbiAgaGVpZ2h0OiAwO1xuICBsZWZ0OiAxODBweDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIHdpZHRoOiAwO1xufVxuXG4uY2FySW5mbyB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgZmxleDogMSAxIGF1dG87XG4gIHBhZGRpbmc6IDAuNGVtO1xufVxuXG4uY2FySW5mbyB0ciB7XG4gIHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcbn1cblxuLmNhckluZm8gdGQge1xuICBib3JkZXItYm90dG9tOiBzb2xpZCAxcHggIzY2NjtcbiAgY29sb3I6ICNmZmY7XG4gIHBhZGRpbmc6IDAuNGVtO1xuICBoZWlnaHQ6IDEuMjVyZW07XG59XG5cbi5jYXJJbmZvIHRkOmxhc3QtY2hpbGQge1xuICB0ZXh0LWFsaWduOiByaWdodDtcbiAgcGFkZGluZy1sZWZ0OiAxZW07XG59XG5cbkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY4cHgpIHtcbiAgI2dyaWQyIHtcbiAgICB3aWR0aDogMzc1cHg7XG4gIH1cblxuICAucGhvdG9JbmZvIHtcbiAgICB3aWR0aDogMTcwcHg7XG4gIH1cblxuICAucGhvdG9JbmZvOmJlZm9yZSB7XG4gICAgbGVmdDogMTIwcHg7XG4gIH1cblxuICAuY2FySW5mbyB0ZCB7XG4gICAgd2lkdGg6IGF1dG87XG4gIH1cbn1cbiIsIi5tYWluLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG59XG4ubWFpbi1jb250YWluZXIgcC50aXAge1xuICBtYXJnaW46IDVweDtcbn1cblxuLnNlY3Rpb24ge1xuICBmbGV4OiAwIDEgYXV0bztcbn1cblxuI2dyaWQge1xuICBmbGV4OiAxIDEgYXV0bztcbn1cblxuI2dyaWQyIHtcbiAgaGVpZ2h0OiAxNjdweDtcbiAgbWFyZ2luLXRvcDogNXB4O1xuICB3aWR0aDogNDAwcHg7XG59XG5cbiNncmlkMiAuZ2MtZ3JpZCB7XG4gIGJhY2tncm91bmQ6ICMzMzM7XG4gIGJvcmRlci1jb2xvcjogIzMzMztcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xufVxuXG4uaW5mby1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xufVxuXG4ucGhvdG9JbmZvIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBoZWlnaHQ6IDE2NXB4O1xuICBsaW5lLWhlaWdodDogMTY1cHg7XG4gIG1hcmdpbjogMDtcbiAgbWFyZ2luLXJpZ2h0OiAxMHB4O1xuICBwYWRkaW5nOiAwO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIHdpZHRoOiAyMzBweDtcbn1cblxuLnBob3RvSW5mbzpiZWZvcmUge1xuICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50IHRyYW5zcGFyZW50ICMzMzMgdHJhbnNwYXJlbnQ7XG4gIGJvcmRlci1zdHlsZTogc29saWQ7XG4gIGJvcmRlci13aWR0aDogMCAwIDE2NXB4IDUwcHg7XG4gIGNvbnRlbnQ6IFwiIFwiO1xuICBoZWlnaHQ6IDA7XG4gIGxlZnQ6IDE4MHB4O1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMDtcbiAgd2lkdGg6IDA7XG59XG5cbi5jYXJJbmZvIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICBmbGV4OiAxIDEgYXV0bztcbiAgcGFkZGluZzogMC40ZW07XG59XG5cbi5jYXJJbmZvIHRyIHtcbiAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lO1xufVxuXG4uY2FySW5mbyB0ZCB7XG4gIGJvcmRlci1ib3R0b206IHNvbGlkIDFweCAjNjY2O1xuICBjb2xvcjogI2ZmZjtcbiAgcGFkZGluZzogMC40ZW07XG4gIGhlaWdodDogMS4yNXJlbTtcbn1cblxuLmNhckluZm8gdGQ6bGFzdC1jaGlsZCB7XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xuICBwYWRkaW5nLWxlZnQ6IDFlbTtcbn1cblxuQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjhweCkge1xuICAjZ3JpZDIge1xuICAgIHdpZHRoOiAzNzVweDtcbiAgfVxuICAucGhvdG9JbmZvIHtcbiAgICB3aWR0aDogMTcwcHg7XG4gIH1cbiAgLnBob3RvSW5mbzpiZWZvcmUge1xuICAgIGxlZnQ6IDEyMHB4O1xuICB9XG4gIC5jYXJJbmZvIHRkIHtcbiAgICB3aWR0aDogYXV0bztcbiAgfVxufSJdfQ== */

(function () {
const IS_PROD = window.process.env.NODE_ENV === 'production';
const USE_NPM = window.process.env.USE_NPM;
const USE_CDN = window.process.env.USE_CDN;
const SITE_ROOT = window.process.env.SITE_ROOT;
const FRAMEWORK = window.process.env.FRAMEWORK;
const ext = IS_PROD ? '.min.js' : '.js';
function js(name) {
return name + ext;
}
function npm(t) {
if (!t.file) {
t.file = IS_PROD ? t.prod : t.dev;
}
const version = USE_CDN && t.version ? '@' + t.version : '';
const path = t.pkg + version + '/' + t.file;
if (USE_CDN) {
return 'https://unpkg.com/' + path;
}
return 'npm:' + path;
}
function dv(t) {
if (USE_CDN || USE_NPM) {
t.file = 'dist/' + t.file + '.min.js';
return npm(t);
}
return SITE_ROOT + '/static/dataviews/' + js(t.file);
}
const isTypeScript = FRAMEWORK === 'angular';
const babelConfig = {
es2015: true,
react: true,
};
const meta = {
js: {
babelOptions: babelConfig,
},
ts: {
typescriptOptions: {
tsconfig: true
},
},
};
const map = {
// gc.dataviews packages
'@grapecity/dataviews.common': dv({pkg:'@grapecity/dataviews.common',file:'gc.dataviews.common',version:'1.8.17'}),
'@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.17'}),
'@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.17'}),
'@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.17'}),
'@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.17'}),
'@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.17'}),
'@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.17'}),
'@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.17'}),
'@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.17'}),
'@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.17'}),
'@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.17'}),
'@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.17'}),
'@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.17'}),
'@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.17'}),
// third-party libs
react: npm({pkg:'react',prod:'umd/react.production.min.js',dev:'umd/react.development.js',version:'16.13.1'}),
'react-dom': npm({pkg:'react-dom',prod:'umd/react-dom.production.min.js',dev:'umd/react-dom.development.js',version:'16.13.1'}),
'react-router-dom': npm({pkg:'react-router-dom',prod:'umd/react-router-dom.min.js',dev:'umd/react-router-dom.js',version:'5.2.0'}),
'vue': npm({pkg:'vue',file:'dist/vue.js',version:'2.6.12'}),
'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.4.3'}),
'lodash': npm({pkg: 'lodash', file: js('lodash')}),
'zone.js': npm({pkg: 'zone.js', file: js('dist/zone')}),
'rxjs': npm({pkg: 'rxjs', file: js('bundles/rxjs.umd')}),
'rxjs/operators': npm({pkg:'rxjs-operators-bundle',prod:'dist/bundle.min.js',dev:'dist/bundle.js',version:'1.0.2'}),
'@angular/core': npm({pkg: '@angular/core', file: js('bundles/core.umd')}),
'@angular/common': npm({pkg: '@angular/common', file: js('bundles/common.umd')}),
'@angular/compiler': npm({pkg: '@angular/compiler', file: js('bundles/compiler.umd')}),
'@angular/platform-browser': npm({pkg: '@angular/platform-browser', file: js('bundles/platform-browser.umd')}),
'@angular/platform-browser-dynamic': npm({pkg: '@angular/platform-browser-dynamic', file: js('bundles/platform-browser-dynamic.umd')}),
'@angular/http': npm({pkg: '@angular/http', file: js('bundles/http.umd')}),
'@angular/common/http': npm({pkg: '@angular/common', file: js('bundles/common-http.umd')}),
'@angular/router': npm({pkg: '@angular/router', file: js('bundles/router.umd')}),
'@angular/forms': npm({pkg: '@angular/forms', file: js('bundles/forms.umd')}),
// systemjs plugins
'systemjs-plugin-json': npm({pkg:'systemjs-plugin-json',file:'json.js',version:'0.3.0'}),
'systemjs-plugin-css': npm({pkg:'systemjs-plugin-css',file:'css.js',version:'0.1.37'}),
'systemjs-plugin-babel': npm({pkg:'systemjs-plugin-babel',file:'plugin-babel.js',version:'0.0.25'}),
'systemjs-babel-build': npm({pkg:'systemjs-plugin-babel',file:'systemjs-babel-browser.js',version:'0.0.25'}),
'plugin-typescript': npm({pkg:'plugin-typescript',file:'lib/plugin.js',version:'8.0.0'}),
'typescript': npm({pkg:'typescript',file:'lib/typescript.js',version:'4.0.2'}),
'systemjs-vue-browser': npm({pkg:'systemjs-vue-browser',file:'index.js',version:'1.0.11'}),
};
const config = {
defaultJSExtensions: true,
transpiler: isTypeScript ? 'plugin-typescript' : 'systemjs-plugin-babel',
typescriptOptions: {
tsconfig: true
},
meta: {
'*.json': {loader: 'systemjs-plugin-json'},
'*.css': {loader: 'systemjs-plugin-css'},
'*.vue': {loader: 'systemjs-vue-browser'},
'*.js': meta.js,
'*.ts': meta.ts,
'app.js': {
format: 'esm',
babelOptions: babelConfig,
},
'typescript': {
exports: 'ts',
},
'@grapecity/dataviews.common': {
format: 'amd',
},
'@grapecity/dataviews.core': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.grid': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.cardlayout': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.masonry': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.calendar': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.timeline': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.trellis': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.gantt': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.searchbox': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.react': {
format: 'amd',
deps: [
'react',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.vue': {
format: 'amd',
deps: [
'vue',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.angular': {
format: 'amd',
deps: [
'@angular/core',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.csvexport': {
format: 'amd',
deps: [
'@grapecity/dataviews.common'
],
},
},
paths: {
// paths serve as alias
'npm:': SITE_ROOT + '/node_modules/',
},
// map tells the System loader where to look for things
map: map,
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'.': { defaultExtension: isTypeScript ? 'ts' : 'js' },
node_modules: { defaultExtension: 'js' },
}
};
// fast format detection to avoid detection by source code using regexp
Object.keys(map).filter(function (key) {
return !config.meta[key];
}).forEach(function (key) {
const path = map[key];
if (path.indexOf('/umd') >= 0 || path.indexOf('.umd') >= 0) {
config.meta[key] = { format: 'amd' };
}
if (path.indexOf('/cjs') >= 0) {
config.meta[key] = { format: 'cjs' };
}
});
System.config(config);
})(this);

Keyboard Navigation (Angular)