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/service/v2/core";
      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"
               },
               update: {
                   url: crudServiceBaseUrl + "/Products/Update",
                   type: "POST",
               contentType: "application/json"
               },
               destroy: {
                   url: crudServiceBaseUrl + "/Products/Destroy",
                   type: "POST",
               contentType: "application/json"
               },
               create: {
                   url: crudServiceBaseUrl + "/Products/Create",
                   type: "POST",
               contentType: "application/json"
               },
              parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                  return 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>

See Also

• JavaScript API Reference of the Data Grid