Widgets inside a Template

[Michael Hilgers]

Hey,

on my main page, i'm using a kendo scheduler widget which works as expected. Here i'd like to customize the edit popup with special fields i need. Here a short look at the scheduler source:

var kScheduler = new kendo.ui.Scheduler($("#scheduler"), {
    dataSource: dsScheduler,
    editable: {
        template: kendo.template($("#schedulerTemplate").html())
    }
});

And here is my template source:

<script type="text/x-kendo-template" id="schedulerTemplate">
    <label>Beginn:</label>
    <input name="start" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: start,invisible: isAllDay" />
    <input name="start" type="text" required data-type="date" data-role="datepicker" data-bind="value: start,visible: isAllDay" />
    <br />

    <label>Ende:</label>
    <input name="end" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: end ,invisible:isAllDay" />
    <input name="end" type="text" required data-type="date" data-role="datepicker" data-bind="value: end ,visible:isAllDay" />
    <br />

    <label>Titel:</label>
    <input name="title" type="text" required data-type="string" data-bind="value: title" />
    <br />

    <label>Beschreibung:</label>
    <textarea name="description" data-type="string" data-bind="value: description" />
    <br />

    <input id="combobox_AppointmentOwner" name="appointmentOwner" />
    <br />

    <label>Ganztägig</label>
    <input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
    <br />

    <label>Öffentlich</label>
    <input type="checkbox" name="PublicEvent" data-type="boolean" data-bind="checked:PublicEvent">
    <br />
</script>

The "combobox_AppointmentOwner" is the DOM element i'd like to bind to a kendo ComboBox. But the widget doesn't initialize and makes a combox out of the input field. On my main page i have a kendo ComboBox which is working properly, so this here is about initializing a kendo widget inside a template. What's the secret to solve this problem?

Regards,
Michael

[Petur Subev]

Hello Michael,

In order to turn the input into a ComboBox widget, you should initialize it with the data-attribute approach covered here:

http://docs.telerik.com/kendo-ui/getting-started/data-attribute-initialization

So in your case it should be:

<input id="combobox_AppointmentOwner" name="appointmentOwner" data-role="combobox" ... other options />

Kind Regards,
Petur Subev
Telerik