Skip to content

Instantly share code, notes, and snippets.

@JeroenVinke

JeroenVinke/app.html

Created January 19, 2017 17:48
Show Gist options
  • Save JeroenVinke/a53ee647181f05dc306e88c1a1192fa8 to your computer and use it in GitHub Desktop.
Save JeroenVinke/a53ee647181f05dc306e88c1a1192fa8 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia KendoUI component - problem report
Raw
app.html
<!-- put your view here -->
<template>
<button click.delegate="saveGridConfig()">Save Config</button>
<button click.delegate="loadGridConfig()">Load Config</button>
<ak-grid k-data-source.bind="datasource"
k-pageable.bind="{ refresh: true, pageSizes: true, buttonCount: 10 }"
k-widget.bind="requestGrid"
k-sortable.bind="true"
k-reorderable.bind="true"
k-groupable.bind="true"
k-resizable.bind="true"
k-reorderable.bind="true"
k-selectable="row"
k-toolbar.bind="['excel']"
k-excel.bind="{ fileName: 'RequestExport.xlsx' }"
k-on-change.delegate="rowSelected($event.detail)"
k-column-menu.bind="true" k-pageable.bind="true" k-editable="inline">
<!-- Column definitions in HTML -->
<ak-col k-title="Contact Name" k-field="ContactName" k-width="100px">
<ak-template kendo-template.bind="true">
<div if.bind="true" ak-tooltip="k-content.call: getTemplate($event,ContactName); k-width.bind: 400; k-height.bind: 200; k-position: top">${ContactName}</div>
</ak-template>
</ak-col>
<ak-col k-title="Contact Title" k-field="ContactTitle"></ak-col>
<ak-col k-title="Company Name" k-field="CompanyName"></ak-col>
<ak-col k-field="Country"></ak-col>
</ak-grid>
</template>
<template>
<p>Loaded</p>
</template>
Raw
app.js
/* put your view model code here */
export class App {
datasource = {
type: 'odata',
transport: {
read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'
},
pageSize: 5
};
getTemplate(e,ContactName) {
var rows = '<tr>'+
'<td>Col1 value</td>'+
'<td>Col2 value</td>'+
'<td>Col3 value</td>'+
'</tr>';
var ret = '<h2>ToolTip for '+ContactName+'</h2>'+
'<div class="table-responsive">'+
'<table class="table table-bordered table-hover table-striped">'+
'<thead>'+
'<tr>'+
'<th>Col1</th>'+
'<th>Col2</th>'+
'<th>Col3</th>'+
'</tr>'+
'</thead>'+
'<tbody>'+
rows +
'</tbody>'+
'</table>'+
'</div>';
return ret;
}
saveGridConfig() {
console.log(this.requestGrid.getOptions());
sessionStorage["kendo-grid-options"] = kendo.stringify(this.requestGrid.getOptions());
}
loadGridConfig() {
var options = sessionStorage["kendo-grid-options"];
if (options) {
setTimeout(
() => {
this.requestGrid.setOptions(JSON.parse(options))
},10);
}
}
}
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>
</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.1.1/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());
}
Raw
problem-details.md

Add any additional information here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment