Another Editor Template Question..

17 posts, 0 answers
  1. Mike
    Mike avatar
    7 posts
    Member since:
    Nov 2008

    Posted 13 Sep 2013 Link to this post

    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
  2. Mike
    Mike avatar
    7 posts
    Member since:
    Nov 2008

    Posted 17 Sep 2013 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 18 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Paul
    Paul avatar
    25 posts
    Member since:
    May 2013

    Posted 16 Oct 2013 Link to this post

    Is there a PHP example for a custom template option? I seem only see HTML5 examples.
  6. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 17 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. gunnisen
    gunnisen avatar
    25 posts
    Member since:
    Oct 2006

    Posted 21 Oct 2013 Link to this post

    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

  8. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 21 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. gunnisen
    gunnisen avatar
    25 posts
    Member since:
    Oct 2006

    Posted 21 Oct 2013 Link to this post

    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
  10. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 22 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. James
    James avatar
    4 posts
    Member since:
    Jul 2012

    Posted 06 Mar 2014 Link to this post

    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.
  12. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 10 Mar 2014 Link to this post

    Hi James,

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

    Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Jeff
    Jeff avatar
    7 posts
    Member since:
    Aug 2012

    Posted 02 Jul 2014 in reply to Vladimir Iliev Link to this post

    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>
  14. Jeff
    Jeff avatar
    7 posts
    Member since:
    Aug 2012

    Posted 02 Jul 2014 in reply to Jeff Link to this post

    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...
  15. Aaron
    Aaron avatar
    20 posts
    Member since:
    Jan 2015

    Posted 01 Dec 2015 in reply to Vladimir Iliev Link to this post

    That Scheduler Custom editor is outdated.  And also JS-specific (wish there was a RAZOR example as well).
  16. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 03 Dec 2015 Link to this post

    Hi Aaron,

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

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  17. Aaron
    Aaron avatar
    20 posts
    Member since:
    Jan 2015

    Posted 10 Dec 2015 in reply to Vladimir Iliev Link to this post

    No better.  The References are outdated and updating them just creates more problems.
  18. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 14 Dec 2015 Link to this post

    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:


    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready