Use AngularJS in Popup Editor Templates
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | All |
| Browser | All |
| Browser Version | All |
Starting with R2 2022, the Kendo UI team officially drops the support for AngularJS 1.x through Kendo UI for jQuery. The AngularJS related files and functionality are removed from the bundles and distribution in R3 SP1 2023. The last version that contains the files is R3 2023.
Description
How can I use the popup editor template of the Kendo UI Grid with AngularJS?
Solution
The following example demonstrates how to use AngularJS directives in a custom Grid popup editor template.
The dataItem is made dirty through ng-change for HTML elements and k-on-change for Kendo UI widgets. Otherwise, the DataSource does not update the modified data items.
The example loads Kendo UI 2023.3.1010 version.
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions"></kendo-grid>
<script type="text/x-kendo-template" id="template">
<label>Product Name <input k-on-change="dataItem.dirty=true" kendo-dropdownlist k-data-source="productNames" data-bind="value: ProductName" /><label>
<br />
<label>Unit Price <input k-on-change="dataItem.dirty=true" kendo-numeric-text-box data-bind="value: UnitPrice" /></label>
<br />
<label my-directive>Discontinued <input type="checkbox" ng-change="dataItem.dirty=true" ng-model="dataItem.Discontinued" /></label>
</script>
</div>
</div>
<script>
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
angular.module("KendoDemos", [ "kendo.directives" ])
.directive("myDirective", function() {
return {
restrict: "AE",
link: function(scope, element) {
if (scope.dataItem.Discontinued) {
element.css("background-color", "red");
} else {
element.css("background-color", "green");
}
}
};
})
.controller("MyCtrl", function($scope) {
$scope.mainGridOptions = {
dataSource: {
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
},
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "200px" }],
editable: {
mode: "popup",
template: kendo.template($("#template").html())
}
};
$scope.productNames = [
"Chai",
"Chang",
"Aniseed Syrup",
"Chef Anton's Cajun Seasoning"
];
});
</script>