Open kendo window dynamically from angular

2 posts, 0 answers
  1. Thomas
    Thomas avatar
    1 posts
    Member since:
    Jul 2015

    Posted 22 Aug 2015 Link to this post

    I'm trying to open a kendo window dynamically from angular. By dynamically, I mean adding a <div kendo-window...> to the html from an angular function and then opening the window. The function looks like this

    $scope.showCalendar = function() {
       var element = "<div kendo-window='calendar' k-visible='false'> <div kendo-calendar></div> </div>";

    The window does not appear. If I include this <div> directly inside the html, then the function call $ works okay, of course.

    I want to do it this way, because I want to open a varying number of windows (the calendar inside the window is just for experiment; I will replace it with my custom content). This actually leads to another, more general question. I can keep track of unique window identifiers like 'win1', 'win2', and so forth, but how do you the function call dynamic? I need to somehow make this static code $ to $, $ and so forth. JavaScript has some kind of eval function? (I'm a JavaScript newbie.)

     Thank you for your help.

  2. Petyo
    Petyo avatar
    2437 posts

    Posted 25 Aug 2015 Link to this post

    Hello Thomas,


    appending the DOM to the container won't instantiate the directives, you need to do some additional scope.compile calls. Given that you determine your JavaScript skill as novice, I can't recommend that approach, as it is fairly advanced one. Notice that this is not Kendo UI specific - same thing won't work with any angular directive (you may use ng-repeat to verify that). 


    If you have the time, I would strongly recommend that you reconsider your approach. Having such DOM insertions in AngularJS is not pretty and violates the framework architecture intentions. 


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