Custom template and translation

[Anthony]

Hi !

When I use a custom template as shown below, my translations (via messages option) no longer work for generated code (example: recurrenceRule).

Do you have a​n idea ?​

<script id="editor" type="text/x-kendo-template">
        <div class="k-edit-label"><label for="title">Type</label></div>
        <div data-container-for="typeId" class="k-edit-field">
            <select id="typeId" data-bind="value:typeId" data-role="dropdownlist" data-value-field="value" data-text-field="text" style="width: 100%"></select>
        </div>
        <div class="k-edit-label">
            <label for="start">Début</label>
        </div>
        <div data-container-for="start" class="k-edit-field">
            <input type="text"
                   data-role="datetimepicker"
                   data-interval="15"
                   data-type="date"
                   data-bind="value:start,invisible:isAllDay"
                   name="start"/>
            <input type="text" data-type="date" data-role="datepicker" data-bind="value:start,visible:isAllDay" name="start" />
            <span data-bind="text: startTimezone"></span>
            <span data-for="start" class="k-invalid-msg" style="display: none;"></span>
        </div>
        <div class="k-edit-label"><label for="end">Fin</label></div>
        <div data-container-for="end" class="k-edit-field">
            <input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
            <input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
            <span data-bind="text: endTimezone"></span>
            <span data-bind="text: startTimezone, invisible: endTimezone"></span>
            <span data-for="end" class="k-invalid-msg" style="display: none;"></span>
        </div>
        <div class="k-edit-label"><label for="recurrenceRule">Récurrence</label></div>
        <div data-container-for="recurrenceRule" class="k-edit-field">
            <div id="recurrenceEditor" data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
        </div>
        <div class="k-edit-label"><label for="description">Note</label></div>
        <div data-container-for="description" class="k-edit-field">
            <textarea name="description" class="k-textbox" data-bind="value:description"></textarea>
        </div>
    </script>

 

edit: function(e) {
                var typeId = e.container.find("#typeId").data("kendoDropDownList");
                typeId.dataSource.data(e.sender.resources[0].dataSource.data());

                var recurrenceEditor = e.container.find("[data-role=recurrenceeditor]").data("kendoRecurrenceEditor");
                recurrenceEditor.setOptions({
                    start: e.event.start
                });
            },
            editable: {
                template: $("#editor").html()
            }

 Thanks,

[Rosen]

Hello Anthony,

The messages declared as Scheduler options will not work as the RecurrenceEditor widget is manually instantiated in your custom edit template. Therefore, you will need to instantiate it with the correct options. This means that the correct messages should be set via the attributes declaration, similar to the following:

<div data-container-for="recurrenceRule" class="k-edit-field">
      <div id="recurrenceEditor" data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor" data-messages='{"daily": { "interval": "My message"} }'></div>
</div>

Regards,
Rosen
Telerik

 

 

[Anthony]

Hello Rosen, 

It works perfectly!

Thank you.