Widgets inside a Template

3 posts, 0 answers
  1. Michael Hilgers
    Michael Hilgers avatar
    76 posts
    Member since:
    Apr 2010

    Posted 26 May 2014 Link to this post

    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
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 28 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Michael Hilgers
    Michael Hilgers avatar
    76 posts
    Member since:
    Apr 2010

    Posted 28 May 2014 in reply to Petur Subev Link to this post

    Hello Petur,

    and how can I bind the input to a kendo datasource in my JS code?

    Kind Regards,
    Michael
Back to Top