<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike">
<head>
<!--
This page can be used as a base for spiking with jQuery, AngularJS and Kendo.
All scripts and styles are loaded from a CDN or inline.
-->
<title>Spike page</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Library styles -->
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.materialblack.min.css" rel="stylesheet" />
<!-- App styles -->
<style>
html, body
{
background-color: #F1F1F1;
font-family: "Open Sans", sans-serif;
font-size: 13px;
height: 100%;
}
a, div, p, h1, h2, h3, h4, h5, h6, input, li, select, span, table, td, textarea, th, tr, ul
{
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
margin: 0;
outline: 0;
padding: 0;
}
body
{
margin: 20px;
}
table
{
width: 100%;
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
{
display: none !important;
}
.invalid .k-combobox
{
border: 1px solid #EC008C;
}
.invalid .k-datepicker
{
border: 1px solid #EC008C;
}
@media (min-width: 500px)
{
.row
{
display: flex;
width: 100%;
}
.column-left
{
width: 200px;
}
.column-right
{
}
}
</style>
</head>
<body ng-controller="main">
<form name="editForm" ng-cloak novalidate>
<br />
<br />
<div class="row">
<div class="column-left">
<label>Name:</label>
</div>
<div class="column-right">
<span ng-class="{ invalid: editForm.personSelector.$invalid }">
<select id="aaSelect"
kendo-combobox
k-option-label="'--Select person--'"
k-on-change="onPersonSelected()"
k-options="personSelectorOptions"
name="personSelector"
ng-model="selectedPersonId"
require-valid-option="{ options: persons, fieldName: 'name' }"></select>
</span>
</div>
</div>
<br />
<br />
<div class="row">
<div class="column-left">Selected person:</div>
<div class="column-right">{{ person.name }}</div>
</div>
</form>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.timezones.min.js"></script>
<script src="script.js"></script>
</body>
</html>
(function ()
{
"use strict";
// This is the starting point (main) for the angular app.
angular.module("spike", ["kendo.directives"]);
}());
(function ()
{
"use strict";
// Note: "combobox text" is the text entered by the user inside the combobox.
function getValidator(controller, element, fieldName, options)
{
var _controller = controller;
var _element = element;
var _fieldName = fieldName;
var _text = null;
var _options = options;
// When options is an array of strings, validate "combobox text" to strings inside array.
// When options is an array of objects, validate "combobox text" to objects inside array, validate against object.fieldName.
function isSameValue(option)
{
return (!_fieldName && _text === option.toString()) ||
(_fieldName && _text === option[_fieldName].toString());
}
// Get "combobox text".
function getSelectedText()
{
var combobox = _element.data("kendoComboBox");
return combobox ? combobox.text() : null;
}
// Validate "combobox text", to all items in the array "options".
// Parameter "value" is not used.
function validate(value)
{
_text = getSelectedText();
var valid = _options.some(isSameValue);
// When "combobox text" is invalid, register a validation error "invalidOption".
_controller.$setValidity('invalidOption', valid);
return valid ? value : undefined;
}
return validate;
}
var directive = function ()
{
function link($scope, element, attributes, controller)
{
var validator = getValidator(controller, element, $scope.model.fieldName, $scope.model.options);
// Register validator for UI changes.
controller.$parsers.unshift(validator);
// Register validator for model changes.
controller.$formatters.unshift(validator);
}
return {
restrict: "A",
link: link,
require: 'ngModel',
scope: {
model: "=requireValidOption"
}
};
};
angular.module("spike").directive("requireValidOption", [directive]);
}());
(function ()
{
"use strict";
var app = angular.module("spike");
var controller = function ($scope)
{
function findByKey(values, key, keyValue)
{
var result = null;
if (values && key && keyValue)
{
for (var i = 0, length = values.length; i < length; i += 1)
{
var value = values[i];
if (value[key].toString() === keyValue.toString())
{
result = value;
break;
}
}
}
return result;
}
$scope.title = "Kendo dropdownlist.";
$scope.persons = [
{ id: 1, name: "Customer 1", dateOfBirth: null },
{ id: 2, name: "Customer 2", dateOfBirth: null },
{ id: 3, name: "Customer 3", dateOfBirth: null },
{ id: 4, name: "Customer 4", dateOfBirth: null }
];
$scope.personSelectorOptions = {
dataSource: new kendo.data.DataSource({
data: $scope.persons
}),
dataTextField: "name",
dataValueField: "id",
filter: "contains",
placeholder: "Select a person",
suggest: true
};
$scope.onPersonSelected = function ()
{
$scope.person = findByKey($scope.persons, "id", $scope.selectedPersonId);
};
};
app.controller("main", ["$scope", controller]);
}());
/* Styles go here */