Skip to content

Commit c2f2642

Browse files
xkamxkam
committed
add events example
1 parent e84520f commit c2f2642

File tree

9 files changed

+121
-3
lines changed

9 files changed

+121
-3
lines changed

‎examples/columns/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Columns - ActiveWidgets/Angular</title>
5+
<title>Columns, rows - ActiveWidgets/Angular</title>
66
</head>
77
<body>
88
<div id="app"></div>

‎examples/columns/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "angular-columns",
33
"version": "1.0.0",
4-
"description": "Columns - ActiveWidgets/Angular",
4+
"description": "Columns, rows - ActiveWidgets/Angular",
55
"keywords": [],
66
"main": "src/main.js",
77
"scripts": {

‎examples/events/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
[Open fullscreen](https://angular.activewidgets.com/events/) | [Source on github](https://github.com/activewidgets/angular/tree/master/examples/events) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/angular/tree/master/examples/events)
3+
4+
Angular example

‎examples/events/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>User events - ActiveWidgets/Angular</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<p>&#10140; Click on a datagrid row to open an alert box</p>
10+
<script src="src/main.js"></script>
11+
</body>
12+
</html>

‎examples/events/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "angular-events",
3+
"version": "1.0.0",
4+
"description": "User events - ActiveWidgets/Angular",
5+
"keywords": [],
6+
"main": "src/main.js",
7+
"scripts": {
8+
"start": "parcel index.html --open",
9+
"build": "parcel build index.html"
10+
},
11+
"dependencies": {
12+
"@activewidgets/angular": "0.0.10",
13+
"@angular/core": "^8",
14+
"@angular/common": "^8",
15+
"@angular/compiler": "^8",
16+
"@angular/compiler-cli": "^8",
17+
"@angular/platform-browser": "^8",
18+
"@angular/platform-browser-dynamic": "^8",
19+
"rxjs": "^6",
20+
"typescript": ">=3.4 <3.6",
21+
"zone.js": "~0.9.1"
22+
},
23+
"devDependencies": {
24+
"parcel-bundler": "^1"
25+
},
26+
"private": true
27+
}

‎examples/events/src/app.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
import { Component } from '@angular/core';
3+
import { columns, rows } from "@activewidgets/examples/data";
4+
import './styles.css';
5+
6+
7+
const template = `<ax-datagrid [columns]="columns" [rows]="rows" (mouse)="onMouse($event)"></ax-datagrid>`;
8+
9+
10+
export class App {
11+
12+
constructor(){
13+
this.columns = columns;
14+
this.rows = rows;
15+
}
16+
17+
18+
onMouse({row}){
19+
alert(`row ${row.key} clicked!`);
20+
}
21+
22+
23+
static get annotations() { return [new Component({
24+
selector: '#app',
25+
template
26+
})]}
27+
}

‎examples/events/src/main.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
import 'core-js/es7/reflect';
3+
import 'zone.js/dist/zone';
4+
5+
import { NgModule, enableProdMode } from '@angular/core';
6+
import { BrowserModule } from '@angular/platform-browser';
7+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
8+
import { AxModule } from '@activewidgets/angular';
9+
10+
import '@activewidgets/angular/css';
11+
12+
import { App } from './app.js';
13+
14+
15+
enableProdMode();
16+
17+
18+
class Module {
19+
static get annotations() { return [new NgModule({
20+
imports: [BrowserModule, AxModule],
21+
declarations: [App],
22+
bootstrap: [App]
23+
})]}
24+
}
25+
26+
platformBrowserDynamic().bootstrapModule(Module);
27+

‎examples/events/src/styles.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
body {
3+
margin: 60px;
4+
font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif;
5+
}
6+
7+
.ax-datagrid {
8+
max-height: 200px;
9+
}
10+
11+
.ax-headers-view {
12+
font-weight: bold;
13+
color: #666;
14+
border-bottom: 1px solid #aaa;
15+
}
16+
17+
.ax-gridlines {
18+
border-bottom: 1px solid #eee;
19+
}

‎examples/viewer/examples.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11

22
import hello_world from '../hello-world/README.md';
33
import columns from '../columns/README.md';
4+
import events from '../events/README.md';
45

56

67
export const Local = {
78
'Hello, World!': {path: 'hello-world', readme: hello_world},
8-
'Columns, rows': {path: 'columns', readme: columns}
9+
'Columns, rows': {path: 'columns', readme: columns},
10+
'User events': {path: 'events', readme: events}
911
};
1012

1113

0 commit comments

Comments
 (0)