Created
May 10, 2017 21:30
-
-
Save JeroenVinke/f27ac23c7b74e2d14fdbe3e9fbe73ee8 to your computer and use it in GitHub Desktop.
Grid: basic usage
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <require from="aurelia-kendoui-bridge/grid/grid"></require> | |
| <require from="aurelia-kendoui-bridge/grid/col"></require> | |
| <require from="aurelia-kendoui-bridge/button/button"></require> | |
| <require from="aurelia-kendoui-bridge/common/template"></require> | |
| <require from="./row-template-one"></require> | |
| <require from="./row-template-two"></require> | |
| <ak-grid k-data-source.bind="datasource"> | |
| <ak-col k-field="ContactName"></ak-col> | |
| <ak-col k-field="ContactTitle"></ak-col> | |
| <ak-template for="rowTemplate"> | |
| <script type="text/x-kendo-temp"> | |
| <tr as-element="${rowtemplate}" model.bind="$this"></tr> | |
| </script> | |
| </ak-template> | |
| </ak-grid> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class BasicUse { | |
| constructor() { | |
| this.datasource = { | |
| data: [{ContactName: 'foo', rowtemplate: 'row-template-one'}, {ContactName: 'bar', rowtemplate: 'row-template-two'}] | |
| }; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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.0.0-beta.1.0.6/config2.js"></script> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-kendoui-bridge'); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <td> | |
| <h1>ROW TEMPLATE 1</h1> | |
| <p style="display: inline;"> | |
| ${dataItem.ContactName} | |
| </p> | |
| <button ak-button>Test</button> | |
| </td> | |
| <td> | |
| <p> | |
| ${dataItem.ContactTitle} | |
| </p> | |
| </td> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {bindable} from 'aurelia-framework'; | |
| export class RowTemplateOne { | |
| @bindable dataItem; | |
| bind(ctx) { | |
| console.log(ctx); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <td> | |
| <h1>ROW TEMPLATE 2</h1> | |
| <p style="display: inline;"> | |
| ${dataItem.ContactName} | |
| </p> | |
| <button ak-button>Test</button> | |
| </td> | |
| <td> | |
| <p> | |
| ${dataItem.ContactTitle} | |
| </p> | |
| </td> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {bindable} from 'aurelia-framework'; | |
| export class RowTemplateTwo { | |
| @bindable dataItem; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment