Skip to content

Instantly share code, notes, and snippets.

@gist-master

gist-master/app.html

Last active June 29, 2017 19:48
Show Gist options
  • Save gist-master/b826cc690bb0dd65a6ba9044aa0b2658 to your computer and use it in GitHub Desktop.
Save gist-master/b826cc690bb0dd65a6ba9044aa0b2658 to your computer and use it in GitHub Desktop.
Download ZIP
Listbox: basic use
Raw
app.html
<template>
<require from="aurelia-kendoui-bridge/listbox/listbox"></require>
<require from="aurelia-kendoui-bridge/common/template"></require>
<require from="./style.css!css"></require>
<div id="example">
<div class="demo-section k-content wide">
<ak-list-box k-data-text-field="ContactName"
k-data-value-field="CustomerID"
k-data-source.bind="datasource"
k-draggable.bind="draggable"
k-drop-sources.bind="['selected']"
k-connect-with="selected"
k-toolbar.bind="toolbar">
<select id="optional" title="Optional">
</select>
<!-- unfortunately Aurelia's templating syntax is not supported here -->
<ak-template kendo-template.bind="true">
<span class="k-state-default" style="background-image: url('https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg')"></span>
<span class="k-state-default">
<h3>#: data.ContactName #</h3>
<p>#: data.CompanyName #</p>
</span>
</ak-template>
</ak-list-box>
<ak-list-box k-data-text-field="ContactName"
k-data-value-field="CustomerID"
k-draggable.bind="draggable"
k-drop-sources.bind="['optional']"
k-connect-with="optional">
<select id="selected" title="Selected"></select>
<!-- unfortunately Aurelia's templating syntax is not supported here -->
<ak-template kendo-template.bind="true">
<span class="k-state-default" style="background-image: url('https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg')"></span>
<span class="k-state-default">
<h3>#: data.ContactName #</h3>
<p>#: data.CompanyName #</p>
</span>
</ak-template>
</ak-list-box>
</div>
</div>
</template>
Raw
app.js
export class Listbox {
toolbar = {
position: 'right',
tools: ['moveUp', 'moveDown', 'transferTo', 'transferFrom', 'transferAllTo', 'transferAllFrom', 'remove']
};
datasource = {
transport: {
read: {
dataType: 'jsonp',
url: 'https://demos.telerik.com/kendo-ui/service/Customers'
}
}
};
draggable = {
placeholder: function(draggedItem) {
return draggedItem
.clone()
.addClass('custom-placeholder')
.removeClass('k-ghost');
}
}
}
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/2017.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/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/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/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.6.2/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');
aurelia.start().then(a => a.setRoot());
}
Raw
style.css
#example .demo-section {
max-width: none;
width: 695px;
}
#example .k-listbox {
width: 326px;
height: 310px;
}
#example .k-listbox:first-child {
width: 326px;
margin-right: 1px;
}
.k-ghost {
display:none!important;
}
.custom-placeholder {
opacity: 0.4;
}
#example .k-item {
line-height: 1em;
}
/* Material Theme padding adjustment*/
.k-material #example .k-item,
.k-material #example .k-item.k-state-hover,
.k-materialblack #example .k-item,
.k-materialblack #examplel .k-item.k-state-hover {
padding-left: 5px;
border-left: 0;
}
#example .k-item > span {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
margin: 20px 10px 10px 5px;
}
#example .k-item > span:first-child,
.k-item.k-drag-clue > span:first-child {
-moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
-webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
box-shadow: inset 0 0 30px rgba(0,0,0,.3);
margin: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-size: 100%;
background-repeat: no-repeat;
}
#example h3,
.k-item.k-drag-clue h3 {
font-size: 1.2em;
font-weight: normal;
margin: 0 0 1px 0;
padding: 0;
}
#example p {
margin: 0;
padding: 0;
font-size: .8em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment