Skip to content

Instantly share code, notes, and snippets.

@JeroenVinke

JeroenVinke/app.html

Forked from SaucyJack/app.html
Created June 30, 2017 20:38
Show Gist options
  • Save JeroenVinke/71fc0271acd65c6b68f2664373d4c4f6 to your computer and use it in GitHub Desktop.
Save JeroenVinke/71fc0271acd65c6b68f2664373d4c4f6 to your computer and use it in GitHub Desktop.
Download ZIP
Grid-Pager-All-Refresh
Raw
app.html
<template>
<router-view></router-view>
</template>
Raw
app.js
export class App {
configureRouter(config, router) {
config.map([
{route: ['', 'items'], moduleId: 'items', name: 'items'},
{route: ['edit'], moduleId: 'edit', name: 'edit'}
]);
this.router = router;
}
}
Raw
edit.html
<template>
You are editing item ID ${id}. <br/>
<button type="button" click.delegate="goBack()">Go Back</button>
</template>
Raw
edit.js
import { inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';
@inject(Router)
export class Edit {
router;
id;
constructor(router) {
this.router = router;
}
activate(params, routeConfig) {
this.id = params.id;
}
goBack() {
this.router.navigateToRoute('items');
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia KendoUI bridge</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.5.3/config2.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
items.html
<template>
<require from="aurelia-kendoui-bridge/grid/grid"></require>
<require from="aurelia-kendoui-bridge/grid/col"></require>
<require from="aurelia-kendoui-bridge/common/template"></require>
<div class="row-fluid">
<button type="button" click.delegate="loadGrid()">Load/Refresh Grid</button>
</div>
<div class="row-fluid" style="padding-left: 15px; padding-right: 15px;">
<ak-grid show.bind="visible"
k-widget.bind="grid"
k-data-source.bind="dataSource"
k-pageable.bind="pageable" >
<ak-col k-hidden="true" k-field="id"></ak-col>
<ak-col k-field="campaign" k-title="Campaign">
<ak-template>
<strong>${campaign}-${language}</strong>
</ak-template>
</ak-col>
<ak-col k-field="email_group" k-title="Group"></ak-col>
<ak-col k-field="external_id" k-title="ID"></ak-col>
<ak-col k-field="name" k-title="Name"></ak-col>
<ak-col k-field="language" k-title="Language"></ak-col>
</ak-grid>
</div>
<div class="row-fluid">
&nbsp;
</div>
</template>
Raw
items.js
import { inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';
@inject(Router)
export class Items {
router;
pageable = {
refresh: false,
pageSizes: true,
buttonCount: 5
};
dataSource: kendo.data.DataSource;
grid;
visible = false;
constructor(router) {
this.router = router;
this.dataSource = new kendo.data.DataSource({pageSize: 10});
}
loadGrid() {
this.visible = true;
var take = _.random(1, 23, false);
this.getGridData(take).then(results => {
let pagesize = this.dataSource.pageSize();
this.dataSource = new kendo.data.DataSource({ pageSize: pagesize, data: results});
this.grid.setDataSource(this.dataSource);
});
}
getGridData(take) {
return new Promise(resolve => {
var data =
[
{
"id": "905",
"account_id": "1",
"campaign_id": "227",
"campaign": "123456",
"email_group": "Sales Group",
"external_id": "123456",
"name": "Thing 1",
"language": "en",
"date_created": "2017-06-09 09:36:46",
"last_updated": "2017-06-09 17:18:34"
},
{
"id": "907",
"account_id": "1",
"campaign_id": "228",
"campaign": "234567",
"email_group": "Sales Group",
"external_id": "234567",
"name": "Thing 2",
"language": "en",
"date_created": "2017-06-09 09:36:47",
"last_updated": "2017-06-09 17:18:34"
},
{
"id": "925",
"account_id": "1",
"campaign_id": "235",
"campaign": "345678",
"email_group": "Sales Group",
"external_id": "345678",
"name": "Thing 3",
"language": "en",
"date_created": "2017-06-09 09:36:47",
"last_updated": "2017-06-09 17:18:35"
},
{
"id": "926",
"account_id": "1",
"campaign_id": "236",
"campaign": "456789",
"email_group": "Sales Group",
"external_id": "456789",
"name": "Thing 4",
"language": "es",
"date_created": "2017-06-09 09:36:47",
"last_updated": "2017-06-09 17:18:35"
},
{
"id": "927",
"account_id": "1",
"campaign_id": "237",
"campaign": "567890",
"email_group": "Sales Group",
"external_id": "567890",
"name": "Thing 5",
"language": "en",
"date_created": "2017-06-09 09:36:47",
"last_updated": "2017-06-09 17:18:35"
},
{
"id": "928",
"account_id": "1",
"campaign_id": "238",
"campaign": "987654",
"email_group": "Sales Group",
"external_id": "987654",
"name": "Thing 6",
"language": "es",
"date_created": "2017-06-09 09:36:47",
"last_updated": "2017-06-09 17:18:35"
},
{
"id": "919",
"account_id": "1",
"campaign_id": "229",
"campaign": "876543",
"email_group": "Sales Group",
"external_id": "876543",
"name": "Thing 7",
"language": "en",
"date_created": "2017-06-09 09:36:47",
"last_updated": "2017-06-09 17:18:35"
},
{
"id": "920",
"account_id": "1",
"campaign_id": "230",
"campaign": "765432",
"email_group": "Sales Group",
"external_id": "765432",
"name": "Thing 8",
"language": "es",
"date_created": "2017-06-09 09:36:47",
"last_updated": "2017-06-09 17:18:35"
},
{
"id": "910",
"account_id": "1",
"campaign_id": "175",
"campaign": "654321",
"email_group": "Sales Group",
"external_id": "654321",
"name": "Thing 9",
"language": "en",
"date_created": "2017-06-09 09:36:47",
"last_updated": "2017-06-09 17:18:34"
},
{
"id": "921",
"account_id": "1",
"campaign_id": "231",
"campaign": "543210",
"email_group": "Sales Group",
"external_id": "543210",
"name": "Thing 10",
"language": "en",
"filters": "",
"date_created": "2017-06-09 09:36:47",
"last_updated": "2017-06-09 17:18:35"
},
{
"id": "922",
"account_id": "1",
"campaign_id": "232",
"campaign": "135790",
"email_group": "Sales Group",
"external_id": "135790",
"name": "Thing 11",
"language": "es",
"date_created": "2017-06-09 09:36:47",
"last_updated": "2017-06-09 17:18:35"
},
{
"id": "923",
"account_id": "1",
"campaign_id": "233",
"campaign": "246810",
"email_group": "Sales Group",
"external_id": "246810",
"name": "Thing 12",
"language": "en",
"date_created": "2017-06-09 09:36:47",
"last_updated": "2017-06-09 17:18:35"
},
{
"id": "924",
"account_id": "1",
"campaign_id": "234",
"campaign": "369121",
"email_group": "Sales Group",
"external_id": "369121",
"name": "Thing 13",
"language": "es",
"date_created": "2017-06-09 09:36:47",
"last_updated": "2017-06-09 17:18:35"
},
{
"id": "877",
"account_id": "1",
"campaign_id": "213",
"campaign": "481216",
"email_group": "Sales Group",
"external_id": "481216",
"name": "Thing 14",
"language": "en",
"date_created": "2017-06-09 09:36:46",
"last_updated": "2017-06-09 17:18:33"
},
{
"id": "878",
"account_id": "1",
"campaign_id": "214",
"campaign": "510152",
"email_group": "Sales Group",
"external_id": "510152",
"name": "Thing 15",
"language": "es",
"date_created": "2017-06-09 09:36:46",
"last_updated": "2017-06-09 17:18:33"
},
{
"id": "879",
"account_id": "1",
"campaign_id": "215",
"campaign": "612182",
"email_group": "Sales Group",
"external_id": "612182",
"name": "Thing 16",
"language": "en",
"date_created": "2017-06-09 09:36:46",
"last_updated": "2017-06-09 17:18:33"
},
{
"id": "880",
"account_id": "1",
"campaign_id": "216",
"campaign": "714212",
"email_group": "Sales Group",
"external_id": "714212",
"name": "Thing 17",
"language": "es",
"date_created": "2017-06-09 09:36:46",
"last_updated": "2017-06-09 17:18:33"
},
{
"id": "871",
"account_id": "1",
"campaign_id": "207",
"campaign": "816243",
"email_group": "Sales Group",
"external_id": "816243",
"name": "Thing 18",
"language": "en",
"date_created": "2017-06-09 09:36:46",
"last_updated": "2017-06-09 17:18:33"
},
{
"id": "872",
"account_id": "1",
"campaign_id": "208",
"campaign": "918273",
"email_group": "Sales Group",
"external_id": "918273",
"name": "Thing 19",
"language": "es",
"date_created": "2017-06-09 09:36:46",
"last_updated": "2017-06-09 17:18:33"
},
{
"id": "873",
"account_id": "1",
"campaign_id": "209",
"campaign": "102030",
"email_group": "Sales Group",
"external_id": "102030",
"name": "Thing 20",
"language": "en",
"date_created": "2017-06-09 09:36:46",
"last_updated": "2017-06-09 17:18:33"
},
{
"id": "874",
"account_id": "1",
"campaign_id": "210",
"campaign": "112233",
"email_group": "Sales Group",
"external_id": "112233",
"name": "Thing 21",
"language": "es",
"date_created": "2017-06-09 09:36:46",
"last_updated": "2017-06-09 17:18:33"
},
{
"id": "875",
"account_id": "1",
"campaign_id": "211",
"campaign": "122436",
"email_group": "Sales Group",
"external_id": "122436",
"name": "Thing 22",
"language": "en",
"date_created": "2017-06-09 09:36:46",
"last_updated": "2017-06-09 17:18:33"
},
{
"id": "876",
"account_id": "1",
"campaign_id": "212",
"campaign": "132639",
"email_group": "Sales Group",
"external_id": "132639",
"name": "Thing 23",
"language": "es",
"date_created": "2017-06-09 09:36:46",
"last_updated": "2017-06-09 17:18:33"
}
];
resolve(!take ? data : _.take(data, take));
});
}
}
Raw
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-kendoui-bridge');
aurelia.start().then(a => a.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment