This is a migrated thread and some comments may be shown as answers.

Access dataItem in column template using Angular

1 Answer 710 Views
Grid
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 24 Sep 2015, 09:36 PM

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?

1 Answer, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 28 Sep 2015, 11:04 AM
Hello James,

I tried to replicate the issue locally, but to no avail. Here is a test demo that uses similar approach:
Could you modify the demo and demonstrate the issue you are experiencing?

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
James
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Share this question
or