Another Editor Template Question..

[Mike]

Hi,
Like many others here - I've got a lot of extra 'stuff' to present when editing scheduler items.

I don't necessarily want to completely replace the built in editor, since I don't want to have to re-invent the All Day / Recurrence functionality that seems to work quite nicely out of the box.

I do however need to present some additional relationships using grids and filtered / typeahead dropdowns that don't seem to be a good fit for the 'Resource' model.

Is it possible to utilize the built in IsAllDay and Resource functionality inside a custom form?

Or is it better to attempt to inject a partial view / html fragment just above the save/cancel buttons by handling the edit event?

Thanks,
Mike

[Mike]

Need to re-write the question here a bit:

Can the recurrence implementation be utilized in a custom view - or do we need to re-invent the wheel at that point?

From what I've learned so far - injecting custom fields into the edit form doesn't seem practical.

Looks like changes made to any injected fields are not included in the form submission - even though they are present in the original model/datasource and bound to the injected controls. Only the original values are passed back on form submission - and changes made to the injected fields will not be included in the post.

So lacking any practical guidelines on extending the existing form - complete replacement seems like the best route. Just hate to re-create the recurrence editing implementation.

[Vladimir Iliev]

Hi Mike,

 
You can include the Recurrence editor to the editor template in the following way:

<!-- Scheduler custom editor -->
<script type="text/x-kendo-template" id="schedulerTemplate">
    Recurrence: <div data-bind="value: recurrenceRule" id="recurrenceEditor"></div>
    <script>
       jQuery(function() {
            $("\#recurrenceEditor").kendoRecurrenceEditor(); })
    <\/script>
</script>

For convenience I also created small jsBin exmaple based on the above solution. 

Also please note that injecting fields in the form works when the correct MVVM bindings are applied.

Kind Regards,
Vladimir Iliev
Telerik

[Pavel]

Is there a PHP example for a custom template option? I seem only see HTML5 examples.

[Vladimir Iliev]

Hi Paul,

 
You can use the template option of the scheduler editable configuration option to define custom editor template. Please check the example below:

1) Set the editor template Id:

$editable = new \Kendo\UI\SchedulerEditable();
$editable->templateId('customTemplate');

$scheduler = new \Kendo\UI\Scheduler('scheduler');
$scheduler->timezone("Etc/UTC")
        ->date(new DateTime('2013/6/13'))

2) create the editor template:

<script id="customTemplate" type="text/x-kendo-template">
    <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 />

    <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 />

    <input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
    <br />
</script>

Kind Regards,
Vladimir Iliev
Telerik

[gunnisen]

Vladimir, earlier in this thread you said:
"Also please note that injecting fields in the form works when the correct MVVM bindings are applied."

Could you please supply a working example of injecting e.g. a text field this way AND getting the field value saved in the database? I'm able to inject the field into the edit dialog via the edit event, but the value returned is always null.

Best regards,
  Gunnar

[Vladimir Iliev]

Hi Gunnar,

 
Please consider the following example:

1) Add property named "phone" to the scheduler dataSource model definition:

schema: {
    model: {
        id: "taskId",
        fields: {
            //define custom field
            phone: {
                type: "text"
            },
            title: {
                from: "Title",
                defaultValue: "No title",
                validation: {
                    required: true
                }
            },

2) Bind input element in scheduler editor template to the "phone" field using Value binding:

<!-- CUSTOM EDITOR TEMPLATE -->
<script type="text/x-kendo-template" id="schedulerTemplate">
    <input data-bind="value: phone" class="k-textbox" type="text" />
</script>

Kind Regards,
Vladimir Iliev
Telerik

[gunnisen]

Thanks, Vladimir, but I was hoping to avoid using my own template, and rather inject a field in the existing editor. Possible?

Best regards,
Gunnar

[Vladimir Iliev]

Hi Mike,

Inserting editors in the default editor template is not supported out-of-the-box and I would suggest implementing custom editor template. 

Kind Regards,
Vladimir Iliev
Telerik

[James]

Is there documentation for the ASP.NET MVC wrapper version for the Scheduler using a custom Template?  There is no documentation for the Scheduler control under the ASP.NET MVC wrapper structure. I assume it's similar to the PHP, but I'm not sure of the differences.  Thanks.

[Vladimir Iliev]

Hi James,

Please check the following CodeLibrary example which demonstrates how to implement custom editor in the Scheduler for ASP.NET MVC:

• Scheduler for ASP.NET MVC: Custom editor

Regards,
Vladimir Iliev
Telerik

[Jeff]

The recurrence editor aligns better when you put the "Repeat" label inside the div id=recurrenceEditor.  Also, the customized messages passed in via options.messages do not seem to work when used this way.

​<div class="lineEntry vAlignTopAll" data-bind="invisible: recurrenceId">
 @* Kendo Recurrance Editor *@
  <div id="recurrenceEditor" name="recurrenceRule" data-bind="value: recurrenceRule">
  <div class="k-edit-label" style="text-align: left; margin: 0 7px 0 0;">
   <label>Repeat</label>
  </div>
 </div>
  @Html.Raw(@"<script>var options = jQuery(""\#scheduler"").data(""kendoScheduler"").options;" +
  @" jQuery(""\#recurrenceEditor"").kendoRecurrenceEditor({" +
  @" start: new Date('#=data.start#')," +
  @" timezone: options.timezone," +
  @" messages: options.messages" +
  @"});" +
 @"<\/script>")
</div>

[Jeff]

Just in case it trips up somebody else, to get your Recurrence Editor to localize, you need to set
messages: options.messages.recurrenceEditor, not just options.messages as so may posts errantly show.

@Html.Raw(@"<script>var options = jQuery(""\#scheduler"").data(""kendoScheduler"").options;" +
 @" jQuery(""\#recurrenceEditor"").kendoRecurrenceEditor({" +
 @" start: new Date('#=data.start#')," +
 @" timezone: options.timezone," +
 @" messages: options.messages.recurrenceEditor " +
 @"});" +
@"<\/script>")

Now the recurrence editor will localize / adjust labels from your schedule configuration.

Enjoy...

[Aaron]

That Scheduler Custom editor is outdated.  And also JS-specific (wish there was a RAZOR example as well).

[Vladimir Iliev]

Hi Aaron,

Please note that the MVC examples for hte Scheduler was moved to the following GitHub repository:

• UI for ASP.NET MVC examples

Regards,
Vladimir Iliev
Telerik

 

 

[Aaron]

No better.  The References are outdated and updating them just creates more problems.

[Vladimir Iliev]

Hello Aaron,

You can always remove the current references and add the new one using the Telerik VisualStudio extension as seen in the following screencast:

• Update UI for ASP.NET MVC project references

Regards,
Vladimir Iliev
Telerik