Kendo Scheduler Custom Templates MVVM

5 posts, 1 answers
  1. John
    John avatar
    3 posts
    Member since:
    Jul 2016

    Posted 11 Nov 2016 Link to this post

    Hi,

     

    I'm using MVVM paradigm with the kendo scheduler. I am attempting to add custom templates for editing and display of tasks. Using the following code the templates seem to be ignored and the default templates used instead. These templates are fine, I use them in non MVVM mode. 

     

    <div id="responsiveCalendarView">
        <div class="k-content wide">
            <div>
                <div id="responsiveCalendar" 
                
                     data-role="scheduler"
                                 
                     
                     data-views="[{ type: 'day', title: 'Day' },
                                  { type: 'week', title: 'Week', eventTemplate: $('#event-template').html()},
                                  { type: 'workWeek', title: 'Work Week'},
                                  { type: 'agenda', title: 'Agenda' },
                                  { type: TasksView, title: 'Tasks' }]"
                                  
                     data-editable= "{template: $('#customEditorTemplate').html()}"   
                     
                     data-bind="source: tasks,
                                visible: isVisible,
                                events: {edit: onEdit, requestStart: requestStart, requestEnd: requestEnd, navigate: navigate, dataBound: dataBound, dataBinding: dataBinding}"  style="height: 800px"></div>
            </div>
        </div>
    </div>

     

    Has anyone else had similar problems using templates with MVVM on the scheduler? Has anyone successfully used templates in the scheduler with MVVM?

     

    Appreciate any assistance.

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1958 posts

    Posted 15 Nov 2016 Link to this post

    Hello John,

    Please refer to the http://dojo.telerik.com/EzEsO/2 example for a reference. 

    Regards,
    Boyan Dimitrov
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  3. John
    John avatar
    3 posts
    Member since:
    Jul 2016

    Posted 15 Nov 2016 Link to this post

    Hi Boyan,

    Thanks for your reply. To further elaborate we use a template loader to load the templates dynamically and add them to the DOM. This is done before the Scheduler is bound. So, in the example I gave above the div with with the id=customEditorTemplate would be added to the DOM of the main page in which the scheduler sits.

    Unfortunately the MVVM template does not appear to see the customEditorTemplate div. It seems that these templates need to be added directly to the MVVM template as in the example you gave.

    Is there a way to dynamically load templates and make them visible to the MVVM code?

     

    Regards,

    John

  4. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1958 posts

    Posted 17 Nov 2016 Link to this post

    Hello John,

    I prepared a sample http://dojo.telerik.com/EzEsO/3 example to recreate your specific scenario. The div element with the custom editor template is created dynamically. The content for the template ( the actual html) is retrieved from remote server (mock an ajax request and response). I used the element with an id of "editor" to store the template html so I can return it as a response from the ajax request. The "editor" element does not play another role besides storing the template html and it is not used by the Kendo UI Scheduler or the view model object in no way. 

    After the div element is populated with the html from response it is added to the DOM tree. Finally (after the custom editor template is added to the DOM tree) the view model is created and bound to the body. 

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  5. John
    John avatar
    3 posts
    Member since:
    Jul 2016

    Posted 17 Nov 2016 Link to this post

    Hi,

     

    Thank you for your kind help. Your example exemplified the issue solution perfectly.

    John

Back to Top