Global Events
Kendo UI for jQuery provides the kendoWidgetCreated and kendoRendered global events.
kendoWidgetCreated is emitted after a single widget is created while kendoRendered is emitted after all widgets that are defined on the page are created.
Upon Widget Creation
For example, your project requires you to create a TreeView widget that automatically expands the checked items upon initialization. You need to use the kendoWidgetCreated event because the widget is not instantiated at the time your controller function runs but after it was finalized. The reason for this behavior is that the widget is built from data which is defined within the controller.
The following example demonstrates how to listen to the kendoWidgetCreated event.
<div ng-app="app" ng-controller="MyCtrl">
<div kendo-tree-view="treeWidget" k-options="treeOptions"></div>
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
$scope.treeOptions = {
dataSource: makeData(),
checkboxes: {
template: "<input type='checkbox' ng-model='dataItem.checked' />"
}
};
$scope.$on("kendoWidgetCreated", function(event, widget){
// The event is emitted for every widget. If you have multiple
// widgets in this controller, check that the event
// is for the one you are interested in.
if (widget === $scope.treeWidget) {
widget.element.find(".k-checkbox input:checked").each(function(){
widget.expand( $(this).parents(".k-item") );
});
}
});
function makeData() {
return [
{ text: "Item 1", items: [
{ text: "SubItem 1.1", items: [
{ text: "SubItem 1.1.1" },
{ text: "SubItem 1.1.2" },
{ text: "SubItem 1.1.3", checked: true }]},
{ text: "SubItem 1.2", items: [
{ text: "SubItem 1.2.1" },
{ text: "SubItem 1.2.2" },
{ text: "SubItem 1.2.3" }]},
{ text: "SubItem 1.3", items: [
{ text: "SubItem 1.3.1" },
{ text: "SubItem 1.3.2" },
{ text: "SubItem 1.3.3" }]}]},
{ text: "Item 2", checked: true, items: [
{ text: "SubItem 2.1", items: [
{ text: "SubItem 2.1.1" },
{ text: "SubItem 2.1.2" },
{ text: "SubItem 2.1.3" }]},
{ text: "SubItem 2.2", items: [
{ text: "SubItem 2.2.1" },
{ text: "SubItem 2.2.2", checked: true },
{ text: "SubItem 2.2.3" }]},
{ text: "SubItem 2.3", items: [
{ text: "SubItem 2.3.1" },
{ text: "SubItem 2.3.2" },
{ text: "SubItem 2.3.3", checked: true }]}]},
{ text: "Item 3", items: [
{ text: "SubItem 3.1", items: [
{ text: "SubItem 3.1.1" },
{ text: "SubItem 3.1.2" },
{ text: "SubItem 3.1.3" }]},
{ text: "SubItem 3.2", items: [
{ text: "SubItem 3.2.1" },
{ text: "SubItem 3.2.2" },
{ text: "SubItem 3.2.3" }]},
{ text: "SubItem 3.3", items: [
{ text: "SubItem 3.3.1" },
{ text: "SubItem 3.3.2" },
{ text: "SubItem 3.3.3" }]}]},
]
}
});
</script>
After Widget Creation
Browsers render data asynchronously and, therefore, the kendoRendered event is useful to manipulate the view of a page while the widgets that are defined on this page finish their rendering. For example, you can either use kendoRendered to initially hide the view and then display it when the widgets are already initialized or you can show a Loading... (or other suitable) overlay that fits your project.
The following example demonstrates how to listen to the kendoRendered event.
<div ng-app="app" ng-controller="MyCtrl">
<input kendo-datepicker="datePicker">
</div>
<script>
angular.module("app", [ "kendo.directives" ]).controller("MyCtrl", function($scope) {
$scope.$on("kendoRendered", function(e) {
console.log("All Kendo UI Widgets are rendered.");
});
});
</script>