Editor Template with Angular

5 posts, 1 answers
  1. Christian
    Christian avatar
    38 posts
    Member since:
    Jul 2014

    Posted 01 Apr 2015 Link to this post

    Hi,

    Is there any example available which shows how to use a custom editor template with angular?

    The thing which is unclear is if I should use ng-model binding in the template and create an angular template or to use # expressions for a kendo template. 

    Since the editor template is not directly supported with template directives (http://docs.telerik.com/kendo-ui/AngularJS/introduction#template-directives) I thought this way might be a solution:

    $scope.schedulerOptions = {
        [...]
        "editable": { "template": kendo.template(jQuery('#editor-template').html())  },
        [...]
     }

    Good idea or bad idea?


    Please push me in the right direction!

    thx, Chris

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 02 Apr 2015 Link to this post

    Hello Christian,

    Both defining the template inside the scheduler options and adding as nested directives are a valid approaches:

    <div kendo-scheduler k-options="schedulerOptions">
        <span k-event-template class='custom-event'>{{dataItem.title}}</span>
        <div k-all-day-event-template class='custom-all-day-event'>{{dataItem.title}}</div>
    </div>

    For more information you can check the following help article:
    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Christian
    Christian avatar
    38 posts
    Member since:
    Jul 2014

    Posted 02 Apr 2015 in reply to Vladimir Iliev Link to this post

    Hello Vladimir,

    I see event-template and all-day-event-template are valid for nested directives. According to the documentation the event editor is not a valid nested directive. 
  4. Christian
    Christian avatar
    38 posts
    Member since:
    Jul 2014

    Posted 02 Apr 2015 Link to this post

    i.e. this does not work:
    <div ng-controller="MyCtrl">
            <div kendo-scheduler k-options="schedulerOptions">
                <span k-event-template class='custom-event'>{{dataItem.title}}</span>
                <div k-all-day-event-template class='custom-all-day-event'>{{dataItem.title}}</div>
                 <div k-editable-template>TEST</div> // <-- not supported?
            </div>
        </div>
  5. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 02 Apr 2015 Link to this post

    Hi Christian,

    Apologize for not being clear enough - when given template is not listed as supported for nested directive you should fall back to the approach from your original post. 

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