Skip to content

Instantly share code, notes, and snippets.

@jawa-the-hutt

jawa-the-hutt/app.html

Last active August 17, 2016 15:40
Show Gist options
  • Save jawa-the-hutt/6b082b7c3ab6bed6acc91f82b73bc46a to your computer and use it in GitHub Desktop.
Save jawa-the-hutt/6b082b7c3ab6bed6acc91f82b73bc46a to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia KendoUI component - problem report
Raw
app.html
<!-- put your view here -->
<template>
<!--<require from="./dynamic-element"></require>-->
<form id="ticketsForm" submit.delegate="submit($event)" ak-validator="k-widget.two-way: validator">
<ul repeat.for="element of elements" id="fieldlist">
<li if.bind="element.htmlElement == 'input'">
<label for="${element.id" class="${labelClass}">${element.labelText}</label>
<input type="${element.type}" id="${element.id}" class="${element.class}" placeholder="${element.placeholder}" validationMessage="${element.validationMessage}" style="${element.style}"
</li>
</ul>
<p></p>
<button class="k-button k-primary" type="submit">Submit</button>
<p></p>
<div class="status" ref="status"></div>
</form>
</template>
Raw
app.js
/* put your view model code here */
export class App {
elements = [
{
htmlElement: "input",
id: "fullname",
type: "text",
name: "fullname",
class: "k-textbox",
placeholder: "Full Name",
labelClass: "required",
labelText: "Your Name: ",
validationRequired: true,
//validationType: "data-text",
validationMessage: "Enter {0}",
style: "width: 220px;"
},
{
htmlElement: "input",
id: "email",
type: "email",
name: "email",
class: "k-textbox",
placeholder: "e.g. myname@example.net",
labelClass: "required",
labelText: "Email: ",
validationRequired: true,
//validationType: "data-email",
validationMessage: " Email format is not valid ",
style: "width: 220px;"
}
]
submit(event) {
event.preventDefault();
console.log(this.validator.validate());
if (this.validator.validate()) {
$(this.status).text('Hooray! You validated!')
.removeClass('invalid')
.addClass('valid');
} else {
$(this.status).text('Oops! There is invalid data in the form.')
.removeClass('valid')
.addClass('invalid');
}
}
}
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>
<style>
#fieldlist {
margin: 0;
padding: 0;
}
#fieldlist li {
list-style: none;
padding-bottom: .7em;
text-align: left;
}
#fieldlist label {
display: block;
padding-bottom: .3em;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
color: #444;
}
#fieldlist li.status {
text-align: center;
}
#fieldlist li .k-widget:not(.k-tooltip),
#fieldlist li .k-textbox {
margin: 0 5px 5px 0;
}
.confirm {
padding-top: 1em;
}
.valid {
color: green;
}
.invalid {
color: red;
}
#fieldlist li input[type="checkbox"] {
margin: 0 5px 0 0;
}
span.k-widget.k-tooltip-validation {
display; inline-block;
width: 160px;
text-align: left;
border: 0;
padding: 0;
margin: 0;
background: none;
box-shadow: none;
color: red;
}
.k-tooltip-validation .k-warning {
display: none;
}
</style>
</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>
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