Use angular controller inside

[Asan]

Hi,

Unfortunately I'm not able to run angular code with inside a custom scheduler template.

Here's what I'm trying to do:

I'm binding the scheduler component with my controller to a HTML element.

$scope.init = function () {
  $("#scheduler").kendoScheduler({
      date: new Date(),
      selectable: true,
      height: $('cg-contentviewer > div').innerHeight() -68,
      views: [
          "day",
          { type: "workWeek", selected: true },
          "week",
          "month",
          "agenda",
          { type: "timeline", eventHeight: 50}
      ],
      timezone: "Etc/UTC",
      editable: {
          template: kendo.template($("#customEventModal").html()),
      },
      eventTemplate: kendo.template($("#customEventModal").html()),
      dataSource: {
          batch: true,
          transport: {
              read: function(options) {
                  $apiplanings.getPlaningItemsForUser({id : $rootScope.profile.id}).$promise.then(function (response){
                      options.success(response);
                  },function errorCallback(response) {

                  });
              },
              update: function(options) {

              },
              create: function(options){

              },
              destroy: function(options){

              },
              parameterMap: function(options, operation) {
                  if (operation !== "read" && options.models) {
                      return {models: kendo.stringify(options.models)};
                  }
              }
          },
          schema: {
              model: {
                  id: "id",
                  fields: {
                      ID: { from: "id", type: "number" },
                      taskId: { from: "id", type: "number" },
                      title: { from: "title", defaultValue: "No title", validation: { required: true } },
                      start: { type: "date", from: "planedfrom" },
                      end: { type: "date", from: "planedto" },
                      description: { from: "description" },
                      ownerId: { from: "createUserId" },
                      isAllDay: { type: "boolean", field: "IsAllDay", default: false }
                  }
              }
          }
      }
  });

[Asan]

Sorry. I accidentally hit the post button...

 Here is my template:

<script type="text/x-kendo-template" id="customEventModal">
        <div ng-init="hello();">
            <span>{{1+1}}</span>
            <div class="k-edit-label"><label for="title">Title</label></div>
            <div data-container-for="title" class="k-edit-field">
                <input type="text" class="k-input k-textbox" name="title" required="required" data-bind="value:title">
            </div>
        </div>
</script>

 

The template is used by the scheduler but the angular code does not get interpreted. What do I have to do to make angular code run inside the template? I've also found the post: http://dojo.telerik.com/iyIzE/6 Here it looks pretty straight forward.

 

Thanks Asan

[Asan]

Sorry, I accidentally hit the post button.

Here is my kendo template:

<script type="text/x-kendo-template" id="customEventModal">
        <div ng-init="hello();">
            <span>{{1+1}}</span>
            <div class="k-edit-label"><label for="title">Title</label></div>
            <div data-container-for="title" class="k-edit-field">
                <input type="text" class="k-input k-textbox" name="title" required="required" data-bind="value:title">
            </div>
        </div>
</script>

 

Unfortunately my angular code inside the template does not get interpreted. What I'm doing wrong? Also found this post  http://dojo.telerik.com/iyIzE/6 where it look's straight forward.

 

Thanks Asan

[Ianko]

Hello Asan,

 

The described behavior is expected as the Kendo Templates in the way you have implemented are never compiled by the angular engine.

 

In order to use the templates for the Scheduler, you should use the angular-dedicated template directives: http://docs.telerik.com/kendo-ui/AngularJS/introduction#template-directives. 

 

Regards,
Ianko
Telerik by Progress