-
-
Save JeroenVinke/301075357b601ea088818b5d77e921f7 to your computer and use it in GitHub Desktop.
Aurelia - Kendoui - Bridge - label in drop-down-list
This file contains 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> | |
| <section> | |
| <h1>Not responding to label click</h1> | |
| <div> | |
| <div> | |
| <h3>Expected, with a simple select and input reference</h3> | |
| <div class="form-group"> | |
| <label for="selectId" class="control-label">Simple select label (click me)</label> | |
| <select | |
| id="selectId" | |
| class="form-control" | |
| value.bind="selectedValue"> | |
| <option repeat.for="value of values" value.bind="value.id">${value.label}</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="inputId" class="control-label">Simple input label (click me)</label> | |
| <input class="form-control" id="inputId" value.bind="inputField"/> | |
| </div> | |
| </div> | |
| <div> | |
| <h3>Not working on a kendo drop-down-list</h3> | |
| <div class="form-group"> | |
| <label for="kendoId" class="control-label">Kendo drop-down-list label (click me)</label> | |
| <ak-drop-down-list | |
| id="kendoId" | |
| class="form-control" | |
| k-data-text-field="label" | |
| k-data-value-field="id" | |
| k-data-source.two-way="values" | |
| k-value.two-way="selectedValue0" | |
| ></ak-drop-down-list> | |
| </div> | |
| <div class="form-group"> | |
| <label for="someDiv" class="control-label">Kendo without the bridge:</label> | |
| <select id="someSelect" ref="someSelect"> | |
| <option value="test">test</option> | |
| <option value="foo">foo</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </template> |
This file contains 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 App { | |
| values = [ | |
| {id: 1, label: 'One'}, | |
| {id: 2, label: 'Two'}, | |
| {id: 3, label: 'Three'} | |
| ]; | |
| attached() { | |
| $(this.someSelect).kendoDropDownList(); | |
| } | |
| } |
This file contains 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</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.4/config2.js"></script> | |
| <!--<script src="./config2.js"></script>--> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| </script> | |
| </body> | |
| </html> |
This file contains 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
| /******************************************************************************* | |
| * The following two lines enable async/await without using babel's | |
| * "runtime" transformer. Uncomment the lines if you intend to use async/await. | |
| * | |
| * More info here: https://github.com/jdanyow/aurelia-plunker/issues/2 | |
| */ | |
| //import regeneratorRuntime from 'babel-runtime/regenerator'; | |
| //window.regeneratorRuntime = regeneratorRuntime; | |
| /******************************************************************************/ | |
| 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