Edit this page

Load View in Window

This article is contributed by Kjartan Valur.

The $kWindow is a service which dynamically creates Kendo UI windows with a separate template and controller. The complete source code is available in the kjartanvalur/angular-kendo-window GitHub repository.

The following example demonstrates how to open a modal Kendo UI Window.

Example
<div ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
        <button type="button" ng-click="openWindow()">Open Kendo UI Window</button>
    </div>
</div>

<script>
    var MyApp = angular.module('myapp', ['kendo.window', 'kendo.directives']);

    MyApp.controller("mycontroller", mycontroller);
    MyApp.controller("modalController", modalController);

    function mycontroller($scope, $kWindow) {
        $scope.title = "My modal title";
        $scope.content = "This is my message to the window!";
        $scope.result = "";

        $scope.openWindow = function(){
            var windowInstance = $kWindow.open({
                options:{
                    modal: true,
                    title: $scope.title,
                    resizable: true,
                    height: 150,
                    width: 400,
                    visible: false
                },
                    templateUrl: 'modal.html',
                    controller: 'modalController',
                    resolve: {
                        message: function () {
                            return $scope.content;
                        }
                    }
             });


            windowInstance.result.then(function (result) {
                if (result) {
                    $scope.result = 'confirmed!';
                }
                else{
                    $scope.result = 'canceled!';
                }
            });
         };
    }

    function modalController($scope, $windowInstance, message) {
      $scope.message = message;

      $scope.confirm = function(){
        $windowInstance.close(true);
      };

      $scope.cancel = function(){
        $windowInstance.close(false);
      };
    }

    mycontroller.$inject = ['$scope', '$kWindow'];
</script>
Example
// modal.html
<h3></h3>

<button type="button" ng-click="confirm()">Confirm</button>
<button type="button" ng-click="cancel()">Cancel</button>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy