I wanted to add autocomplete kendo box in kendo grid using angularjs.
Sample here is in JQUERY Kendo grid in Product Name field.Click on field and edit or add new row. Please help with such implementation using AngularJS Kendo Grid,
function Editor2(container, options) {
$('<input id="autocomplete" required data-text-field="ProductName" data-value-field="ProductID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete({
dataSource: dataSource,
dataTextField: "ProductName"
});
}
Please run below code in plunker to learn how to bind AngularJS Kendo Grid
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions">
</kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.countryNames = [
"Albania",
"Andorra",
"Armenia",
"Austria",
"Azerbaijan",
"Belarus",
"Belgium",
"Bosnia & Herzegovina",
"Bulgaria",
"Croatia",
"Cyprus",
"Czech Republic",
"Denmark",
"Estonia",
"Finland",
"France",
"Georgia",
"Germany",
"Greece",
"Hungary",
"Iceland",
"Ireland",
"Italy",
"Kosovo",
"Latvia",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macedonia",
"Malta",
"Moldova",
"Monaco",
"Montenegro",
"Netherlands",
"Norway",
"Poland",
"Portugal",
"Romania",
"Russia",
"San Marino",
"Serbia",
"Slovakia",
"Slovenia",
"Spain",
"Sweden",
"Switzerland",
"Turkey",
"Ukraine",
"United Kingdom",
"Vatican City"
];
var data = new kendo.data.DataSource({
data: [
{Name: "Albania"},
{Name:"Andorra"},
{Name:"Armenia"},
{Name:"Austria"},
{Name:"Azerbaijan"},
{Name:"Belarus"},
{Name:"Belgium"},
{Name:"Bosnia & Herzegovina"},
{Name:"Bulgaria"},
{Name:"Croatia"},
{Name:"Cyprus"},
{Name:"Czech Republic"},
{Name:"Denmark"},
{Name:"Estonia"},
{Name:"Finland"},
{Name:"France"},
{Name:"Georgia"},
{Name:"Germany"},
{Name:"Greece"},
{Name:"Hungary"},
{Name:"Iceland"},
{Name:"Ireland"},
{Name:"Italy"},
{Name:"Kosovo"},
{Name:"Latvia"},
{Name:"Liechtenstein"},
{Name:"Lithuania"},
{Name:"Luxembourg"},
{Name:"Macedonia"},
{Name:"Malta"},
{Name:"Moldova"},
{Name:"Monaco"},
{Name:"Montenegro"},
{Name:"Netherlands"},
{Name:"Norway"},
{Name:"Poland"},
{Name:"Portugal"},
{Name:"Romania"},
{Name:"Russia"},
{Name:"San Marino"},
{Name:"Serbia"},
{Name:"Slovakia"},
{Name:"Slovenia"},
{Name:"Spain"},
{Name:"Sweden"},
{Name:"Switzerland"},
{Name:"Turkey"},
{Name:"Ukraine"},
{Name: "United Kingdom"},
{Name:"Vatican City"}
]});
Editor2 = function (container, options){
$('<input data-bind="value:' + options.field + '" style="width: 100px" />')
.appendTo(container)
.kendoAutoComplete({
dataSource: options.values
});};
$scope.mainGridOptions = {
dataSource: data,
sortable: true,
pageable: true,
columns: [{
field: "Name",
title: "Name",
width: "120px",
editor: Editor2,
values: $scope.countryNames
}],editable: true
};
})
</script>
</body>
</html>