Skip to content

Instantly share code, notes, and snippets.

@len-ro

len-ro/api-currency.xml

Forked from adriatic/app.html
Last active August 10, 2016 16:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save len-ro/02d6e19ce368d9c799f17b5e3dca2a38 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save len-ro/02d6e19ce368d9c799f17b5e3dca2a38 to your computer and use it in GitHub Desktop.
Download ZIP
Model onChange event
Raw
api-currency.xml
<list>
<item id="241" shortname="AED" name="AED">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="601" shortname="ARS" name="Argentine Peso">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="81" shortname="AUD" name="Australian Dollar">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="301" shortname="BRL" name="Brazilian Real">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="163" shortname="CAD" name="Canadian Dollar">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="46" shortname="CHF" name="Swiss Franc">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="485" shortname="CLP" name="Chile Peso">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="561" shortname="CNY" name="Chinese Yuan">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="341" shortname="CZK" name="Czech Koruna">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="661" shortname="DKK" name="Danish krone">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="27" shortname="EUR" name="Euro">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="65" shortname="GBP" name="British Pound">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="101" shortname="HUF" name="HUF">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="55" shortname="JPY" name="Japanese Yen">
<extraInfo class="list">
<int>0</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="381" shortname="MXN" name="Mexican Peso">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="141" shortname="NOK" name="NOK">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="520" shortname="PLN" name="PLN">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="452" shortname="RON" name="Romania New Leu">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="421" shortname="RUB" name="Russia Ruble">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="201" shortname="SEK" name="SEK">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="264" shortname="SGD" name="SGD">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
<item id="23" shortname="USD" name="US Dollar">
<extraInfo class="list">
<int>2</int>
<extraItem name="nonDeliverable">
<value class="boolean">false</value>
</extraItem>
</extraInfo>
</item>
</list>
Raw
app.html
<template>
<require from="dictionary-combo"></require>
<div id="example">
<div class="demo-section k-content">
<ak-combobox k-option-label="Select category..."
k-data-text-field="shortname"
k-data-value-field="id"
k-data-source.bind="dataSource"
value.two-way="model.cur1"
k-on-change.delegate="onChange($event)"
style="width: 100%;">
<ak-template>
<span class="k-state-default"><h3>${id} - ${shortname}</h3><p>${name}</p></span>
</ak-template>
</ak-combobox>
<input ak-datepicker="k-value.two-way: model.date" k-on-change.delegate="onChange($event)" style="width: 100%" />
<dictionary-combo data-source.bind="dataSource" value.two-way="model.cur2" k-on-change.delegate="onChange($event)"></dictionary-combo>
</div>
</div>
</template>
Raw
app.js
export class CascadingDropDownList {
dataSource = new kendo.data.DataSource({
transport: {
// specify the XML file to read. The same as read: { url: "books.xml" }
read: "api-currency.xml"
},
schema: {
// specify the the schema is XML
type: "xml",
// the XML element which represents a single data record
data: "/list/item",
// define the model - the object which will represent a single data record
model: {
// configure the fields of the object
id: "id",
fields: {
name: "@name",
shortname: "@shortname",
id: "@id",
extraInfo: "extraInfo"
}
}
}
});
model = {};
onChange(event){
console.dir(event);
console.log("change: " + JSON.stringify(this.model));
}
}
Raw
dictionary-combo.html
<template>
<ak-combobox k-data-source.bind="dataSource"
k-data-text-field="shortname"
k-data-value-field="id"
k-value.two-way="value"
k-on-change.delegate="onChange($event)"
style="width: 100%;">
<ak-template>
<span class="k-state-default"><h3>${id} - ${shortname}</h3><p>${name}</p></span>
</ak-template
</ak-combobox>
</template>
Raw
dictionary-combo.js
import {bindable, inject, TaskQueue} from 'aurelia-framework';
@inject(Element, TaskQueue)
export class DictionaryCombo {
@bindable dataSource = null;
@bindable value = null;
@bindable dictionary = null;
@bindable comboValue = null;
element:Element = null;
taskQueue:TaskQueue = null;
constructor(element:Element, taskQueue:TaskQueue) {
this.element = element;
this.taskQueue = taskQueue;
}
onChange(event){
event.stopPropagation();
console.log("dictionaryCombo.onChange: " + this.value);
//wrong way: this.dispatch()
this.taskQueue.queueMicroTask(() => this.dispatch());
}
/**
valueChanged(newValue, oldValue){
console.log("value: " + oldValue + " => " + newValue);
if(typeof newValue != "undefined")
this.comboValue = newValue.id;
}
comboValueChanged(newValue, oldValue){
console.log("comboValue: " + oldValue + " => " + newValue);
this.value = this.dataSource.get(newValue);
}
*/
dispatch(){
this.dispatchCustomEvent(this.element, "k-on-change", {value: this.value});
}
dispatchCustomEvent(element:Element, type:string, detail:Object, bubbles:boolean){
let newEvent;
if (window.CustomEvent) {
newEvent = new CustomEvent(type, {
detail: detail,
bubbles: true
});
} else {
newEvent = document.createEvent('CustomEvent');
newEvent.initCustomEvent(type, bubbles, true, {
detail: detail
});
}
element.dispatchEvent(newEvent);
}
}
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>
<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/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/0.3.22/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