Hello,
We have an MVC4 project in which we are using Kendo UI with AngularJS. What is the best way to propagate Kendo events back to Angular? I guess we could manually create handlers for all the events we want to handle in Angular, but I was wondering if there is a more efficient way of doing this.
Thank you.
Daniel D.
We have an MVC4 project in which we are using Kendo UI with AngularJS. What is the best way to propagate Kendo events back to Angular? I guess we could manually create handlers for all the events we want to handle in Angular, but I was wondering if there is a more efficient way of doing this.
Thank you.
Daniel D.
5 Answers, 1 is accepted
0
Accepted
Hi Daniel,
If not you have no other option but use regular JavaScript functions to handle Kendo UI events. Regards,
Atanas Korchev
Telerik
If you are using the anguler kendo open source library you can handle events like this:
// controller
function HomeCtrl($scope) {
$scope.thingsOptions = {
dataSource: {
data: [{ name: "Thing 1", id: 1 },
{ name: "Thing 2", id: 2 },
{ name: "Thing 3", id: 3 }]
},
dataTextField: "name",
dataValueField: "id",
optionLabel: "Select A Thing"
};
$scope.thingsChange = function(e) {
console.log(e.sender.text());
};
}
// markup
<
select
kendo-drop-down-list
k-options
=
"thingsOptions"
k-on-change
=
"thingsChange(kendoEvent)"
></
select
>
If not you have no other option but use regular JavaScript functions to handle Kendo UI events. Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Daniel
Top achievements
Rank 1
answered on 25 Oct 2013, 01:18 PM
Atanas,
Thank you for your help. This approach looks pretty straight forward. We will give it a try.
Thank you for your help. This approach looks pretty straight forward. We will give it a try.
0

Daniel
Top achievements
Rank 1
answered on 25 Oct 2013, 05:58 PM
Another question I meant to ask is: suppose that we have a Kendo UI extension wrapped into an Angular directive. Is there a way to handle the extension's events in the directive itself instead in the controller. We are trying to create reusable pieces of code that would be used across the application and do not want to duplicate the event handler in every controller. As you can imagine, as the application grows, this model could become very difficult to maintain if every controller has its own copy of the code.
Thank you.
Thank you.
0

Daniel
Top achievements
Rank 1
answered on 27 Oct 2013, 01:44 PM
We can basically map the events inside the link function of the directive:
However, in this case we lose the ability to use the Kendo specific events. We are limited to the regular HTML events.
Is there a way to handle the Kendo events this way?
Thanks,
Daniel
var app = angular.module("kendoddltest", ['kendo.directives'])
app.directive("ddltest", function(){
return {
restrict: "E",
template: "<
select
kendo-drop-down-list k-options=\"list\" ></
select
>"
,
link: function (scope, elem, attr) {
//create the handler
elem.bind("change", function (e) {
alert('You selected: ' + e.target.value);
})
}
}
})
Is there a way to handle the Kendo events this way?
Thanks,
Daniel
0
Accepted
Hello,
Regards,
Atanas Korchev
Telerik
You can then use the bind method of the dropdownlist to attach its events:
link: function (scope, elem, attr) {
//create the handler
elem.data("kendoDropDownList").bind("change", function (e) {
alert('You selected: ' + e.target.value);
})
}
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!