How to access the data in kendo grid using angular?

See more:

HTML

jQuery

HTML5

AngularJs

Kendo

, +

I have a kendo grid with few columns(let's name them as A,B,C,D) where data in column A & B I am getting from the database. Column C is a drop down and..

my requirement is upon change of drop-down in column C, I should perform some sort of calculations on the values of column B & C(i.e, drop-down value) and the result should be updated in column D.

Till the drop-down part my code is working very well. What I cannot achieve is to get the value of column B under change of event of drop down. I tried using $scope there but to no avail. ""I hope I am able to convey my issue clearly"..


Any help would be highly appreciated......

What I have tried:

<select kendo-drop-down-list
                k-options="roleOptions"
                style="width: 100%"></select>
    
    

    

    <script>
        angular.module('PerformanceApp', ["kendo.directives"]).controller('PerformanceController', function ($scope, $http, $q) {

            $scope.Roles = {
                serverFiltering: true,
                transport: {
                    read: {
                        url: "Performance/GetRoles"
                    }
                }
            }

            $scope.roleOptions = {
                optionLabel: "Select Role..",
                dataSource: $scope.Roles,
                dataTextField: "Role",
                dataValueField: "Id",
                change: function (e) {
                    console.log(e.sender.value());
                    var aa = $scope.GetServerData(e.sender.value());
                    aa.then(function (data) {
                        $scope.gridData.data(data);
                    });
                }
            };

            $scope.gridData = new kendo.data.DataSource({
                group: { field: "Category" }
            });

            $scope.gridColumns = [
                    //{ field: "Category", title: "Category" },
                    { field: "CategoryParameter", title: "Category Parameter" },
                    { field: "TI", title: "Team/Individual" },
                    { field: "Score", title: "Score" },
                    { field: "YourRating", title: "Your Rating", template: '<select kendo-drop-down-list k-options="yourRating" style="width: 100%"></select>' },
                    { field: "YourComment", title: "Your Comment", editable: true },
                    { field: "ManagerRating", title: "Manager Rating", template: '<select kendo-drop-down-list k-options="managerRating" style="width: 100%"></select>' },
                    { field: "ManagerComment", title: "Manager Comment", editable: true },
                    { field: "IWeightage", title: "Individual Weightage", template: "" },
                    { field: "MWeightage", title: "Manager Weightage", template: "" }
            ];

            $scope.ratingDataSource = [
                    { Text: 1, Value: 1 },
                    { Text: 2, Value: 2 },
                    { Text: 3, Value: 3 },
                    { Text: 4, Value: 4 },
                    { Text: 5, Value: 5 },
            ];

            $scope.yourRating = {
                dataTextField: "Text",
                dataValueField: "Value",
                dataSource: $scope.ratingDataSource,
                change: function (e) {
                    debugger;
                    //Here I want the value of column "Score"
                    console.log(parseInt(this.value()));
                }
            };

            $scope.managerRating = {
                dataTextField: "Text",
                dataValueField: "Value",
                dataSource: $scope.ratingDataSource,
                change: function (e) {
                    console.log(parseInt(this.value()));
                }
            };

            $scope.GetServerData = function (value) {
                var deferred = $q.defer();
                $http({
                    method: 'GET',
                    url: '/Performance/GetInitialValues',
                    params: { roleId: value }
                })
                .success(function (data) {
                    console.log(data);
                    deferred.resolve(data);
                });
                return deferred.promise;
            }
        });

    </script>