Use angular controller inside

4 posts, 0 answers
  1. Asan
    Asan avatar
    3 posts
    Member since:
    Oct 2016

    Posted 07 Apr 2017 Link to this post

    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 }
                      }
                  }
              }
          
      });     
  2. Asan
    Asan avatar
    3 posts
    Member since:
    Oct 2016

    Posted 07 Apr 2017 in reply to Asan Link to this post

    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

  3. Asan
    Asan avatar
    3 posts
    Member since:
    Oct 2016

    Posted 07 Apr 2017 in reply to Asan Link to this post

    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

  4. Ianko
    Admin
    Ianko avatar
    1940 posts

    Posted 11 Apr 2017 Link to this post

    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.
Back to Top