Skip to content

Instantly share code, notes, and snippets.

@JeroenVinke

JeroenVinke/app.html

Forked from johntom/app.html
Created December 1, 2016 19:58
Show Gist options
  • Save JeroenVinke/747a725909e21097a2a61b48f141873b to your computer and use it in GitHub Desktop.
Save JeroenVinke/747a725909e21097a2a61b48f141873b to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia: Kendo TemplatesGrouping Exports https://gist.run/?id=53582770b5d72003fe3969c740b8fb6e
Raw
readme.txt
// john tomaselli for Greater Than Zero wwww.gtz.com
// import {api} from '../Utils/api'
// import $ from 'jquery';
// import moment from 'moment';
// import { inject } from 'aurelia-dependency-injection';
// import { AppRouter } from 'aurelia-router';
// import { ListViewModel } from '../list-view-model';loadData
// import {activationStrategy} from 'aurelia-router';
// @
// inject(AppRouter)
// export class live extends ListViewModel {
// determineActivationStrategy() {
// return activationStrategy.replace; //replace the viewmodel with a new instance
// // or activationStrategy.invokeLifecycle to invoke router lifecycle methods on the existing VM
// // or activationStrategy.noChange to explicitly use the default behavior
// }
// pageable = {
// refresh: true,
// pageSizes: true,
// buttonCount: 10
// }
// startDatePicker = new Date('1-1-2016');
// endDatePicker = new Date();
// // endDatePicker= new Date('3-3-2016');
// constructor(router) {
// super('kendoPTJQ2GROUP', router);
// this.statusText = 'turn box off'
// this.router = router;
// this.ss1;
// this.ss2;
// }
// startChange() {
// // http://stackoverflow.com/questions/18399805/reloading-refreshing-kendo-grid
// // let startDate = this.startDatePicker.value();
// // // let endDate = this.endDatePicker.value();
// // if (startDate) {
// // // startDate = new Date(startDate);
// // // startDate.setDate(startDate.getDate());
// // // this.endDatePicker.min(startDate);
// // let endDate = moment(this.endDatePicker).format('MM-DD-YYYY')
// // let startDate = moment(this.startDatePicker).format('MM-DD-YYYY')
// // } else if (endDate) {
// // this.startDatePicker.max(new Date(endDate));
// // } else {
// // endDate = new Date();
// // this.startDatePicker.max(endDate);
// // this.endDatePicker.min(endDate);
// // }
// }
// endChange() {
// // let endDate = moment(this.endDatePicker).format('MM-DD-YYYY')
// // let startDate = moment(this.startDatePicker).format('MM-DD-YYYY')
// // if (endDate) {
// // endDate = new Date(endDate);
// // endDate.setDate(endDate.getDate());
// // this.startDatePicker.max(endDate);
// // } else if (startDate) {
// // this.endDatePicker.min(new Date(startDate));
// // } else {
// // endDate = new Date();
// // this.startDatePicker.max(endDate);
// // this.endDatePicker.min(endDate);
// // }
// }
// activate(params, queryString, routeConfig) {
// console.log(params)
// let d1 = params.d1
// // console.log(params.d1)
// // console.log(params.d2)
// if (d1 === undefined) {
// this.ss1 = '1-1-2016'
// this.ss2 = '2-1-2016'
// } else {
// this.ss1 = params.d1
// this.ss2 = params.d2
// this.startDatePicker = new Date(this.ss1);
// this.endDatePicker = new Date(this.ss2);
// }
// }
// changeData() {
// let s1 = moment(this.startDatePicker).format('MM-DD-YYYY')
// let s2 = moment(this.endDatePicker).format('MM-DD-YYYY')
// let rt = 'kendoPTJQ2GROUP'
// console.log('this.route ', this.route)
// this.router.navigate(rt + '/1' + '?d1=' + s1 + '&d2=' + s2);
// }
// attached() {
// jQuery(this.grid).kendoGrid({
// toolbar: ["excel"],
// excel: {
// fileName: "Kendo UI Grid Export.xlsx",
// proxyURL: "//demos.telerik.com/kendo-ui/service/export",
// filterable: true,
// allPages: true
// },
// excelExport:
// function(e) {
// var rows = e.workbook.sheets[0].rows;
// for (var ri = 0; ri < rows.length; ri++) {
// var row = rows[ri];
// if (row.type == "group-footer" || row.type == "footer") {
// for (var ci = 0; ci < row.cells.length; ci++) {
// var cell = row.cells[ci];
// if (cell.value) {
// // Use jQuery.fn.text to remove the HTML and get only the text
// cell.value = $(cell.value).text();
// // Set the alignment
// cell.hAlign = "right";
// }
// }
// }
// }
// },
// dataSource: {
// type: "json",
// transport: {
// // fetch data
// read: "http://localhost:8080/api/v1/two/getAll/" + this.ss1 + "/" + this.ss2
// },
// group: {
// field: "TenantCategory_TenantCategory", aggregates: [
// { field: "TenantCategory_Desc", aggregate: "count" },
// { field: "Total", aggregate: "sum" }
// ]
// },
// schema: {
// model: {
// fields: {
// CompanyName: { type: "string" },
// CYM: { type: "string" },
// CDATE: { type: "string" },
// TenantCategory_TenantCategory: { type: "string" },
// TenantCategory_Desc: { type: "string" },
// Comments: { type: "string" },
// Total: { type: "number" },
// TenantCategory_Amt: { type: "number" }
// }
// }
// },
// pageSize: 20,
// aggregate: [{ field: "TenantCategory_Desc", aggregate: "count" },
// { field: "Total", aggregate: "sum" }]
// },
// groupable: true,
// sortable: true,
// scrollable: false,
// pageable: true,
// columns: [
// { field: "TenantCategory_Desc", title: "TenantCategory_Desc", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
// { field: "Total",
// headerAttributes:{ style:"text-align:right"},
// attributes:{ class:"text-right" } ,
// title: "Total", type: "number", format: "{0:c2}", aggregates: ["sum"],
// footerTemplate: "<div style='float: right'>#= kendo.toString(sum, 'c2') #</div>", groupFooterTemplate: "<div style='float: right'>#= kendo.toString(sum, 'c2') #</div>" },
// { field: "CompanyName", filterable: false },
// { field: "CYM", title: "YearMonth", filterable: true },
// { field: "CDATE", filterable: false },
// ]
// });
// }
// }
// export class CurrencyFormatValueConverter {
// toView(value) {
// return numeral(value).format('($0,0.00)');
// }
// }
=====================
<!--<template>-->
<!-- <style>-->
<!-- html {-->
<!-- font-size: 14px;-->
<!-- font-family: Arial, Helvetica, sans-serif;-->
<!-- }-->
<!-- ,-->
<!-- .k-grid .ra,-->
<!-- .k-numerictextbox .k-input {-->
<!-- text-align: right;-->
<!-- }-->
<!-- </style>-->
<!-- <title></title>-->
<!-- <link rel="stylesheet" href="vendors/styles/kendo.common-material.min.css" />-->
<!-- <link rel="stylesheet" href="vendors/styles/kendo.material.min.css" />-->
<!-- <link rel="stylesheet" href="vendors/styles/kendo.material.mobile.min.css" />-->
<!-- <script src="vendors/js/jquery.min.js"></script>-->
<!-- <script src="vendors/js/jszip.min.js"></script>-->
<!-- <div id="example">-->
<!-- <h4>Tenant Work Order Analysis </h4>-->
<!-- <div class='row'>-->
<!-- <div class="col-sm-12">-->
<!-- <div class="col-sm-4">-->
<!-- <span style="margin-top: 2em;"> Start date :</span>-->
<!-- <input id="datepicker" ak-datepicker="k-value.two-way: startDatePicker" style="width: 100%" k-on-change.delegate="startChange()"-->
<!-- />-->
<!-- </div>-->
<!-- <div class="col-sm-4">-->
<!-- <span style="margin-top: 2em;"> End Date :</span>-->
<!-- <input id="datepicker" ak-datepicker="k-value.two-way: endDatePicker" style="width: 100%" k-on-change.delegate="endChange()"-->
<!-- />-->
<!-- </div>-->
<!-- <div class="col-sm-4">-->
<!-- <button type="button" class="btn btn-default btn-lg" click.delegate="changeData()">-->
<!-- <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div ref="grid"></div>-->
<!-- </div>-->
<!--</template>-->
Raw
app.html
<template>
<!--<base href="http://demos.telerik.com/kendo-ui/grid/excel-export">-->
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.914/js/jszip.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.914/js/pako_deflate.min.js"></script>
<script type="x/kendo-template" id="page-template">
<div class="page-template">
<div class="header">
<div style="float: right">Page #: pageNum # of #: totalPages #</div>
Multi-page grid with automatic page breaking
</div>
<div class="watermark">KENDO UI</div>
<div class="footer">
Page #: pageNum # of #: totalPages #
</div>
</div>
</script>
<style>
/* Page Template for the exported PDF */
.page-template {
font-family: "DejaVu Sans", "Arial", sans-serif;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.page-template .header {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
border-bottom: 1px solid #888;
color: #888;
}
.page-template .footer {
position: absolute;
bottom: 30px;
left: 30px;
right: 30px;
border-top: 1px solid #888;
text-align: center;
color: #888;
}
.page-template .watermark {
font-weight: bold;
font-size: 400%;
text-align: center;
margin-top: 30%;
color: #aaaaaa;
opacity: 0.1;
transform: rotate(-35deg) scale(1.7, 1.5);
}
/* Content styling */
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0, 0, 0, .2);
margin-left: 5px;
}
kendo-pdf-document .customer-photo {
border: 1px solid #dedede;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
<style>
/*
Use the DejaVu Sans font for display and embedding in the PDF file.
The standard PDF fonts have no support for Unicode characters.
*/
.k-grid {
font-family: "DejaVu Sans", "Arial", sans-serif;
}
</style>
<div id="example">
<div class='row'>
<!--<div class="col-sm-1">
</div>
<div class="col-sm-11">-->
<h1 style="margin-left: 2em;"> Kendo Templates with Aurelia</h1>
<p>this uses the KendoUI templates because of the bug when using aureila templates with footer totals</p>
<p>Check out the export to excel with right aligned totals</p>
<p>In the live system the change data uses a reload of current view with changed params</p>
<p>see the readme.txt to view the live code</p>
<p>
<button click.delegate="save()" ak-button>Save</button>
<button click.delegate="reloadPage()" ak-button>Reload page</button>
<button click.delegate="load()" ak-button>Load</button>
</p>
<span style="margin-left: 2em;"> Category :</span>
<input ref="Category" style="width: 25%;">
<button click.delegate="changeData()">Change data</button>
<button click.delegate="clearData()">clearData</button>
<!--</div>-->
</div>
<div ref="grid"></div>
</div>
Raw
app.js
import $ from 'jquery';
import { inject } from 'aurelia-dependency-injection';
import { AppRouter } from 'aurelia-router';
import {activationStrategy} from 'aurelia-router';
@
inject(AppRouter)
export class Advanced {
pageable = {
refresh: true,
pageSizes: true,
buttonCount: 10
}
constructor(router) {
this.router = router;
this.Category
}
changeData() {
let s1 = this.Category.value
let rt = 'kendoPTJQGist' // select current route
/// let rt = 'kendoPTJQ2Group'
this.router.navigate(rt + '?SupplierID=' + s1);
}
clearData() {
// this.datasource.read({
// contacts: []
// })
// return true
alert('cd')
}
save() {
localStorage["kendo-grid-options"] = kendo.stringify(this.grid.getOptions());
alert("Saved to storage. Reload now and click the Load button");
}
load() {
var options = localStorage["kendo-grid-options"];
if (options) {
this.grid.setOptions(JSON.parse(options));
}
}
reloadPage(){
location.reload();
}
// activate(params, queryString, routeConfig) {
// let d1 = params.d1
// if (d1 === undefined) {
// this.ss1 = '1-1-2016'
// this.ss2 = this.endDatePicker//'2-1-2016'
// } else {
// this.ss1 = params.d1
// this.ss2 = params.d2
// this.startDatePicker = new Date(this.ss1);
// this.endDatePicker = new Date(this.ss2);
// }
// }
attached() {
// $(`#${this.id}`).tabs();
jQuery(this.grid).kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "//demos.telerik.com/kendo-ui/service/export",
filterable: true,
allPages: true
},
excelExport:
function (e) {
var rows = e.workbook.sheets[0].rows;
for (var ri = 0; ri < rows.length; ri++) {
var row = rows[ri];
if (row.type == "group-footer" || row.type == "footer") {
for (var ci = 0; ci < row.cells.length; ci++) {
var cell = row.cells[ci];
// Use jQuery.fn.text to remove the HTML and get only the text
// must have a <div> or it blows
if (cell.value) {
cell.value = $(cell.value).text();
// Set the alignment
cell.hAlign = "right";
}
}
}
}
},
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema: {
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" },
SupplierID: { type: "number" },
CategoryID: { type: "number" }
}
}
},
pageSize: 7,
group: {
field: "SupplierID", aggregates: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum" },
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "count" },
{ field: "SupplierID", aggregate: "count" }
]
},
aggregate: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum" },
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "min" },
{ field: "UnitsInStock", aggregate: "max" },
{ field: "SupplierID", aggregate: "count" },
]
},
sortable: true,
pageable: true,
groupable: true,
filterable: true,
columnMenu: true,
reorderable: true,
resizable: true,
columns: [
{
width: 300, locked: true, field: "ProductName", title: "Product Name", aggregates: ["count"],
footerTemplate: "<div style='float: right'>#= kendo.toString(count, '0') #</div>",
groupFooterTemplate: "<div style='float: right'>#= kendo.toString(count, '0') #</div>"
},
{ width: 300, field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },
{
width: 300, field: "UnitsOnOrder", title: "-Units On Order-",
headerAttributes: { style: "text-align:right" },
attributes: { class: "text-right" },
format: "{0:00.0}",
aggregates: ["average"],
footerTemplate: "<div style='float: right'>#= kendo.toString(average, '0.00') #</div>",
groupFooterTemplate: "<div style='float: right'>#= kendo.toString(average, '0.00') #</div>"
},
{
width: 300, field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"],
footerTemplate: "<div> Min: #= min # Max: #= max #</div>",
groupHeaderTemplate: "<div>Units In Stock: #= value # (Count: #= count#)</div>"
},
{
width: 100, field: "SupplierID", title: " SupplierID", aggregates: ["count"],
groupHeaderTemplate: "SupplierID: #= value # (Count: #= count#)"
},
{ width: 100, locked: true, field: "CategoryID", title: "CategoryID" }
]
});
this.grid = jQuery(this.grid).data('kendoGrid');
}
}
//val | currencyFormat
export class CurrencyFormatValueConverter {
toView(value) {
return numeral(value).format('($0,0.00)');
}
}
Raw
basic-use.css
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
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.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.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/0.3.5/config2.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-kendoui-bridge', kendo => kendo.pro());
aurelia.start().then(a => a.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment