This is a migrated thread and some comments may be shown as answers.

Set date of scheduler in editor template

4 Answers 204 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Veteran
Thomas asked on 15 Jul 2020, 02:43 PM

Hello,

I have scheduler that has editable events. When editing an event the template that i provide loads up another scheduler. The scheduler within the editor template needs to have it's date set to match the start date of the event i'm editing. So far i can get this working by using a custom binder to bind my date in the editor model to my scheduler.

EditorTemplate:

 

 

@(Html.Kendo().Scheduler<TaskViewModel>()
    .Name("staffAvailability")
    .Height(300)
    .HtmlAttributes(new {data_bind = "bindDate:start, visible:Staff.length" })
    .Timezone("Europe/London")
    .Editable(false)
    .AutoBind(false)
    .Views(views =>
    {
        views.TimelineView(timeline =>
        {
            timeline.Footer(false);
        });
    })
    .DataSource(dataSource => dataSource
        .ServerOperation(true)
        .Read(read => read.Action("ListStaffSessions", "Scheduler").Data("getStaffAttendance"))
    ).Events(e => e.DataBound("dataBoundAttendanceControl").DataBinding("dataBindingAttendanceControl"))
    )

javascript:

kendo.data.binders.widget.bindDate = kendo.data.Binder.extend({
    init: function (widget, bindings, options) {
        kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
    },
    refresh: function () {
        var that = this,
            value = that.bindings["bindDate"].get()
        var scheduler = $(that.element).data("kendoScheduler");
        scheduler.date(value);
    }
});

 

The issue i have is i don't want the scheduler to read from my data source on load, so i've specified that autoBind should be false on this scheduler however because i'm trying to bind the date this way that results in a change event being fired and my data source gets read.

Is there any way for me to provide the scheduler in my editor template a start date via the html helpers to avoid having to write a custom binder?

4 Answers, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 20 Jul 2020, 09:06 AM

Hello Thomas,

A possible approach could be to handle the edit event of the main Scheduler. The event data provides information on the event edited, including the event start and end date. To set the date of the Scheduler in the Editor template to the start date of the edited event you can try using the date method to set the current scheduler date:

.Events(ev=>ev.Edit("onEdit"))
edit: function(e) {
    var scheduler = $("#schedulerInTemplate").data("kendoScheduler"); //get a reference to the Scheduler in the Editor template
    scheduler.date(e.event.start.getDate()); 
  }

Give the suggestion a try and let me know if it resolves the issue.

Regards,
Aleksandar
Progress Telerik

0
Thomas
Top achievements
Rank 1
Veteran
answered on 20 Jul 2020, 03:07 PM
Hello,
I've tried your suggestion and it seems to produce similar behavior as the custom binding. 
I've attached a screenshot of a stack trace. At the bottom of the screenshot you'll see "editSession" that is my javascript function which I've attached to the "main" scheduler on edit.

attaching the edit event:
.Events(e => e.Edit("editSession"))

editSession:
function editSession(e) {
     var event = e.event;
     console.log('edit session', event);
     var staffScheduler = e.container.find('#staffAvailability').data("kendoScheduler");
     staffScheduler.date(e.event.start);
     if (event.ReadOnly) {
         e.container.find('.k-scheduler-resetSeries, .k-edit-buttons').hide();
     }
 }

Thanks for your time
Thomas
P.S. I tried to use e.event.start.getDate() but it threw an error:
TypeError: t.getFullYear is not a function
Which seems to be from the first line of this function:
function getDate(date) {               
    date = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
    adjustDST(date, 0);               
return date;            }

0
Thomas
Top achievements
Rank 1
Veteran
answered on 20 Jul 2020, 03:14 PM

Apologies,

forgot to attach the stack trace to my previous post.

Thanks 

Tom

0
Aleksandar
Telerik team
answered on 23 Jul 2020, 10:32 AM

Hello Thomas,

I investigated the scenario further and here is a possible approach that I can suggest, in order to achieve the desired functionality:

In the EditorTemplate for the custom editor add an element, from which the scheduler should be initialized:

Editor Template:

<div class="myScheduler"></div>

Handle the Edit event and initialize a Scheduler for this element, once the edit event fires:

.Events(ev=>ev.Edit("onEdit"))

function onEdit(e) {
        var element = e.container.find('.myScheduler');
        element.kendoScheduler({
        date: e.event.start,
        autoBind:false,
        //Scheduler configuration options omitted for brevity
    });

    }

In the above-suggested approach, you can set the autoBind to false to prevent calling the read action once the Edit pop-up window opens, and you can set the current date of the Scheduler to the currently edited event.

This way, when you open the Edit popup window and display a Scheduler for the date of the event. If you inspect the Network tab you will note that a request will be triggered only when you interact with the Scheduler, for example navigate to a next day. I have attached a sample project for reference.

Regards,
Aleksandar
Progress Telerik

Tags
Scheduler
Asked by
Thomas
Top achievements
Rank 1
Veteran
Answers by
Aleksandar
Telerik team
Thomas
Top achievements
Rank 1
Veteran
Share this question
or