Kendo Scheduler Custom Templates MVVM

[John]

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.

 

[Boyan Dimitrov]

Hello John,

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

Regards,
Boyan Dimitrov
Telerik by Progress

 

 

[John]

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

[Boyan Dimitrov]

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

[John]

Hi,

 

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

John