Issues with angular directives and scheduler templates

[SLM]

Hi,

I have trouble with angular events such as ng-click when using scheduler groupHeaderTemplate and eventTemplate.
The ng-click event is not fired.

Samples:

//Loading templates
this.groupHeaderTemplate = <string>$templateCache.get(SchedulerPageController.groupHeaderTemplatePath);
this.eventTemplate = <string>$templateCache.get(SchedulerPageController.eventTemplatePath);

let options: kendo.ui.SchedulerOptions = kendo.ui.Scheduler.fn.options;
options.groupHeaderTemplate = kendo.template(this.groupHeaderTemplate);
options.eventTemplate = kendo.template(this.eventTemplate);

Group Header template

<div class="row" k-template>
    <div class="col-sm-7">
        <span><strong style="color: #=color#">#=text#</strong></span>
    </div>
    <div class="col-sm-4 text-right">
        <button class="btn btn-danger" ng-click="alert('test')"><i class="fa fa-times"></i></button>
    </div>
</div>

Event template

<div class="movie-template">
    <img src="#= image #">
    <p>
        #: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
    </p>
    <h3>#: title #</h3>
    <a href="#= imdb #" ng-click="console.log('test')">Movie in IMDB</a>
</div>

[Vladimir Iliev]

Hi,

I already answered to this query in duplicated support ticket created by you - #1051853 . Please keep in mind that it is highly recommended that you keep related questions in one support thread or a forum post, so that we can easily keep track of your support history and provide better answers in a shorter time.

Regards,
Vladimir Iliev
Telerik by Progress

 

 

[Jin]

Hi Vladimir,

 

Can you give me the link for this problem?

I am facing the same problem, ng-click='myclicked()' in scheduler groupHeaderTemplate is not fired.

 

function myController($q, $scope)

{

       $scope.myclicked = function () {
           alert("myclicked on: ");
       };

 

      $scope.schedulerOptions = {
           .........

            groupHeaderTemplate: function () {
                return "<button ng-click='myclicked()'>Click </button>";

           },

           .......

    };

}

 

[Vladimir Iliev]

Hi Jin,

Please check the related answer below:

Please note that currently the Scheduler does not support template directives for the group header template option - for more information you can check the Angular documentation:

• AngularJS Integration: Template directives

You can however share your idea at Kendo UI UserVoice to allow other users vote for it. All ideas are reviewed by our dev / PM team and included in next Kendo UI releases. 

 

Regards,
Vladimir Iliev
Telerik by Progress

 

 

[Jin]

Is there a work around I could assign a click event handler to the checkbox in the group header?

[Georgi Krustev]

Hello Jin,

The possible workaround is to wire the click events of the group header checkboxes with regular JavaScript. You can use for instance jQuery to find all checkboxes and and wire their clicks. The suggested logic can be implemented in the Scheduler dataBound event handler:

http://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#events-dataBound

Regards,
Georgi Krustev
Telerik by Progress