Separate Kendo Scheduler Editor Templates

Question

Am I able to load a custom template based on a condition?

eg..

If I was making a booking for a mechanic then the editor form would show textboxes for carmodel, yearmake etc.

If I was making a booking for a carpet cleaner the editor form would show textboxes for howmanyrooms, room sizes etc..

Am I able to pass an ID of a service and show the particular editor form for the correct service?

we can currently display this functionality if we create different scheduler Views but that would then create a duplication of many pages.

Were you able to come up with a solution for this problem? Can you share them? — roderickprince
No I didn't but I did find a work around by dynamically adding textboxes on the following page. To b able to choose a view model at runtime for the scheduler didn't seem possible — Costas Aletrari

Katrien Martens Katrien Martens · Accepted Answer · 2014-05-26T14:13:13

I had the exact same problem and after searching a long time and combining what I found, I came to this :

1) above my scheduler I have a kendodropdownlist

<input id="reservationPicker" />
<script>
$("#reservationPicker").kendoDropDownList({
    dataTextField: "name",
    dataValueField: "reservationDefTypeId",
    dataSource: reservationPickerDataSource
});
</script>

2) my event has an extra field reservationDef which will hold the information of the dropdownlist.

3) I can use this information in my template

<script id="editorScheduler" type="text/x-kendo-template">
<center>
    <div id="main">
        #if(reservationDef=="mechanic"){#
            <h3>Mechanic stuff</h3>
        #}else if(reservationDef=="carpetCleaner"){#
            <h3>Carpet Cleaner stuff</h3>
        #}else{#
            <h3>unknown type of reservation !</h3>
            #: reservationDef #
        #}#
    </div>
</center>
</script>

4) I use this template in my scheduler

editable: {
template: $("#editorScheduler").html()
},

5) but what with a new appointment ! I use the add event of the scheduler and I fill in this information in the event

add: function (e) {
var reservationTypes = $("#reservationPicker").data("kendoDropDownList");
var selectedReservationType = reservationTypes.dataItem();
e.event.reservationDef = selectedReservationType.appointmentTitle;
},

This does the trick for me. Good luck !

Separate Kendo Scheduler Editor Templates

2 Answers