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

    Hi,

    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 = ngDialog.open({
                    template: 'scripts/sections/contract/views/partials/myModal.html',
                    scope: $scope,
                    controller: 'modalController',
                    backdrop: 'static',
                    closeByDocument: false,
                    preCloseCallback: function (value) {
                        $("#myGrid").data("kendoGrid").dataSource.read();
                    }
                });

    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.

    http://dojo.telerik.com/uNaba/4

     

  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
    Admin
    Dimo avatar
    8407 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:

    http://docs.telerik.com/kendo-ui/AngularJS/introduction#widgets-placed-in-window

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