Access dataItem in column template using Angular

[James]

I have an app using Kendo and in my model I have several arrays of items that I need to display in dropdown lists. I can display items in dropdown lists that are directly off the model but can not figure out how to access the item for the current row.

HTML for displaying the grid.

<div kendo-grid="grid" options="surchargeGridOptions"></div>

JavaScript for my grid options.

$scope.surchargeGridOptions = {
        dataSource: {
            pageSize: 15,
            autoSync: true,
            autoBind: false,

            transport: {
                read: function(e) {
                    service.getCustomers($scope.model.customer.CustomerID)
                        .success(function(data, status, headers, config) {
                            e.success(data);
                        });
                }
            }
        },
        toolbar: ["create"],
        sortable: true,
        pageable: true,
        selectable: true,
        editable: true,
        columns: [
            {
                field: "CarrierID",
                title: "Carrier",
                editor: "<input kendo-drop-down-list k-data-text-field=\"'Value'\" k-data-value-field=\"'Key'\" k-data-source=\"model.Carriers\" ng-model=\"dataItem.CarrierID\"/>",
                template: "#=getCarrierName(CarrierID)#"
            },
            {
                field: "RateGroupID",
                title: "Rate Group",
                editor: "<input kendo-drop-down-list k-data-text-field=\"'Name'\" k-data-value-field=\"'Id'\" k-data-source=\"dataItem.RateGroups\" ng-model=\"dataItem.RateGroupID\"/>",
                template: "#=getRateGroupName(RateGroupID, dataItem.RateGroups)#"
            },
            {
                command: "destroy",
                title: " ",
            },
        ]
    };

In the column for RateGroupID, I get an error saying dataItem not defined. It happens when template is included in the column definition.

Function calls for templates

getCategoryName = function (key) {
        for (var idx = 0, length = $scope.model.Categories.length; idx < length; idx++) {
            if ($scope.model.Categories[idx].Key === key) {
                return $scope.model.Categories[idx].Value;
            }
        }
        return "";
    };

    getRateGroupName = function (key, list) {
        for (var idx = 0, length = list.length; idx < length; idx++) {
            if (list[idx].Id === key) {
                return list[idx].Name;
            }
        }
        return "";
    };

How do I access the dataItem to retrieve information from the array. Also, is there a better way to do what I am trying to do with the grid and dropdownlists in Angular and Kendo?

[Georgi Krustev]

Hello James,

I tried to replicate the issue locally, but to no avail. Here is a test demo that uses similar approach:

• http://dojo.telerik.com/UcUTu

Could you modify the demo and demonstrate the issue you are experiencing?

Regards,
Georgi Krustev
Telerik