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>