How to open a window with different controller

4 posts, 0 answers
  1. Bill
    Bill avatar
    31 posts
    Member since:
    Mar 2013

    Posted 04 Mar 2016 Link to this post


    I am trying to convert existing code that uses ngModal (similar to bootstrap modal) to a kendo window control.  This is within an Angular 1.4 SPA, 2016 Q1 Kendo Pro.  The issue I'm having is that I can't figure out how to set the controller for the modal and be able to open it from a function in a different controller.  I run into problems where either I can find and open the window but the controller is the calling controller, or I cannot find the window by id at all.

    The original code in gridController looks something like this:

            function openModal() {
                $scope.myModal ={
                    template: 'scripts/sections/contract/views/partials/myModal.html',
                    scope: $scope,
                    controller: 'modalController',
                    backdrop: 'static',
                    closeByDocument: false,
                    preCloseCallback: function (value) {

    The kendo window widget does not have controller or scope properties, so a simple replacement won't work.  My next attempt was to wrap the myModal.html with the following, <div  data-ng-controller="modalController as vm">     <div kendo-window="kwindow" k-options="windowOptions">.  The modalController has $scope.windowOptions ={...} with appropriate values.  When I do this: var kwin = $("#kwindow").data("kendoWindow");  from the gridController, kwindow is always empty.  Alternatively, I can put the window in html that lives under the GridController and then find it, but that will never work for segregating the controllers and I want to keep them separated.  So how can this be done?

  2. Bill
    Bill avatar
    31 posts
    Member since:
    Mar 2013

    Posted 05 Mar 2016 Link to this post

    I think I have it figured out but you'll need to nest the controllers.  I don't know how the window could be visible to the dom any other way.  If anyone finds a way to do this without nesting divs/controllers, let me know.


    Here is a nice demo showing how to do it.


  3. Bill
    Bill avatar
    31 posts
    Member since:
    Mar 2013

    Posted 07 Mar 2016 Link to this post

    Didn't see it before but win5, the last example, is not binding with scope and leaving {{hello}} in the content. It should be "Wassup from Controller 2" as shown in win4.
  4. Dimo
    Dimo avatar
    8474 posts

    Posted 08 Mar 2016 Link to this post

    Hi Bill,

    Window 5 does not display the value of the hello scope variable, because the widget is created via JavaScript, so it is not Angular aware. As a result, when its Ajax content is rendered, there is nobody to digest the Window content automatically. You either need to do this manually, or create Window 5 the Angular way, as Window 4.

    We have some documentation related to scopes, controllers and Kendo UI Windows here:

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top