This is a migrated thread and some comments may be shown as answers.

Use angular controller inside

3 Answers 48 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Asan
Top achievements
Rank 1
Asan asked on 07 Apr 2017, 01:11 PM

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 }
                  }
              }
          }
      
  });     

3 Answers, 1 is accepted

Sort by
0
Asan
Top achievements
Rank 1
answered on 07 Apr 2017, 01:17 PM

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

0
Asan
Top achievements
Rank 1
answered on 07 Apr 2017, 01:20 PM

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

0
Ianko
Telerik team
answered on 11 Apr 2017, 08:20 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Scheduler
Asked by
Asan
Top achievements
Rank 1
Answers by
Asan
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or