Skip to content

Instantly share code, notes, and snippets.

Avatar

Nikolaj Ivancic adriatic

View GitHub Profile
@adriatic
adriatic / app.css
Last active Jul 19, 2016
autocomplete - api
View app.css
.box .k-textbox {
width: 80px;
}
.box .k-button {
min-width: 80px;
}
li {
margin: 0;
padding: 0;
list-style: none;
@adriatic
adriatic / app.html
Last active Jul 19, 2016
autocomplete basic-use
View app.html
<template>
<div id="example">
<div class="demo-section k-content">
<p><strong>People:</strong></p>
<ak-autocomplete k-data-source.bind="items">
<input style="width: 100%;">
</ak-autocomplete>
<p class="demo-hint" style="word-break: break-all">Type a name, available values in the list are: ${ items } </p>
</div>
</div>
@adriatic
adriatic / app.html
Last active Jul 19, 2016
Autocomplete: events
View app.html
<template>
<require from="./logger.js"></require>
<div id="example">
<div class="demo-section k-content">
<p><strong>Select a state in USA:</strong></p>
<ak-autocomplete k-data-source.bind="items"
k-on-open.delegate="logger.log('open')"
k-on-close.delegate="logger.log('close')"
k-on-change.delegate="logger.log('change')"
k-on-select.delegate="onSelect($event.detail)"
@adriatic
adriatic / app.html
Last active Jul 19, 2016
Autocomplete: server filtering
View app.html
<template>
<div id="example">
<div class="demo-section k-content">
<p><strong>Find a product:</strong></p>
<ak-autocomplete k-data-source.bind="datasource";
k-data-text-field="ProductName";
k-filter="contains";
k-min-length.bind="3">
<input style="width: 100%;"></input>
</ak-autocomplete>
@adriatic
adriatic / app.html
Last active Jul 19, 2016
Autocomplete: virtualization
View app.html
<template>
<div id="example">
<div class="demo-section k-content">
<h4>Search for shipping name</h4>
<ak-autocomplete k-data-source.bind="datasource"
k-virtual.bind="virtual"
k-data-text-field="ShipName"
k-height.bind="520">
<ak-template>
@adriatic
adriatic / app.html
Last active Jul 19, 2016
Autocomplete: grouping
View app.html
<template>
<div id="example">
<div class="demo-section k-content">
<p><strong>Find a customer:</strong></p>
<ak-autocomplete k-data-source.bind="datasource"
k-height.bind="400"
k-data-text-field="ContactName">
<input style="width: 100%">
</ak-autocomplete>
@adriatic
adriatic / app.html
Last active Jul 19, 2016
Autocomplete: value binding
View app.html
<template>
<div id="example">
<div class="demo-section k-content">
<p><strong>People:</strong></p>
<ak-autocomplete k-data-source.bind="items"
k-value.two-way="selectedValue">
<input style="width: 100%;">
</ak-autocomplete>
@adriatic
adriatic / app.html
Last active Jul 19, 2016
Autocomplete: highlighting
View app.html
<template>
<div id="example">
<div class="demo-section k-content">
<ak-autocomplete k-data-source.bind="data"
k-filter="startswith"
k-placeholder="Select country..."
k-separator=", ">
<ak-template>
<span innerhtml.bind="formatValue($$item, textbox)"></span>
</ak-template>
@adriatic
adriatic / app.html
Last active Jul 19, 2016
Area charts: basic use
View app.html
<template>
<ak-chart k-title.bind="{text: 'Gross Domestic product growth \n /GDP annual %/'}"
k-legend.bind="{position: 'bottom'}"
k-series-defaults.bind="seriesDefaults"
k-series.bind="series"
k-value-axis.bind="valueAxis"
k-category-axis.bind="categoryAxis"
k-tooltip.bind="tooltip">
</ak-chart>
</template>
@adriatic
adriatic / app.html
Last active Jul 19, 2016
Area charts: binding to grouped data
View app.html
<template>
<ak-chart k-title.bind="{text: 'Stock Prices'}"
k-data-source.bind="datasource"
k-legend.bind="{position: 'bottom'}"
k-series.bind="series"
k-value-axis.bind="valueAxis"
k-category-axis.bind="categoryAxis"
k-tooltip.bind="tooltip">
</ak-chart>
</template>