How to access edit recurrence buttons Scheduler recurrence editor

[n/a]

I am just wondering how to access the buttons that allow you to choose either to edit the current recurrence or edit the entire recurrence series. I would like to call a function when one of them is clicked. I have attached a picture of the buttons for your convenience.

[Veselin Tsvetanov]

Hi Brent,

As the recurring event editor prompt does not emit a dedicated event, in order to attach click event handlers to its two buttons, you will need to follow a bit longer path. Here is how I would approach this scenario:

function onDataBound(e) {
  var recurring = $('.k-i-reload').closest('.k-event');

  recurring.on('dblclick', function() {
    setTimeout(function() {
      $('.k-scheduler-Editcurrentoccurrence').on('click', function() {
        console.log('Editcurrentoccurrence');
      });

      $('.k-scheduler-Edittheseries').on('click', function() {
        console.log('Edittheseries');
      });
    });
  });
};

The above is an implementation for the Scheduler.DataBound event handler. It retrieves all the recurring events and attaches a double click handler to them. That handler attaches the required click handlers to the two edit buttons.

Regards,
Veselin Tsvetanov
Progress Telerik

[n/a]

This does not seem to be working, the var recurring is always null so the .on() is not working. This is what my razor and javascript look like.

@(Html.Kendo().Scheduler<WebUI.Scheduler.Calendar.Projection>
                ()
                .Name("scheduler")
                .Date(DateTime.Now.Date)
                .StartTime(DateTime.Now.Date)
                .EndTime(DateTime.Now.Date.AddDays(31))
                .Height(800)
                //.Timezone("Etc/UTC")
                .Selectable(true)
                .Editable(editable =>
                {
                    //editable.EditRecurringMode(SchedulerEditRecurringMode.Series);
                    //editable.TemplateName("CustomEditorTemplate");
                })
                .Events(e =>
                {
                    e.DataBound("onDataBound");

                })
                .Views(views =>
                {
                    views.DayView();
                    views.WeekView();
                    views.MonthView(monthView => monthView.Selected(true));
                    views.AgendaView();
                    views.TimelineView();
                })
                .Resources(resource =>
                {
                    resource.Add(Model => Model.CalendarId)
                    .Title("Calendars")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(ViewBag.Calendars);

                    resource.Add(Model => Model.Attendees)
                    .Title("Resources")
                    .DataSource(ds => ds
                        .Custom()
                        .Transport(transport => transport.Read(read => read.Action("Resources", "Scheduler")))
                        .Schema(schema => schema
                            .Data("Data")
                            .Total("Total")
                                 )
                               )
                    .DataTextField("Text")
                    .DataValueField("Value");
                    //.Title("Attendees")
                    //.Multiple(true)
                    //.DataTextField("Text")
                    //.DataValueField("Value")
                    //.BindTo((List<SelectListItem>)Session["Attendees"]);
                })
                .DataSource(d => d
                .Model(m =>
                {
                    m.Id(f => f.id);
                    m.Field(f => f.CalendarId).DefaultValue(ViewBag.Calendars[0].Value);
                    //m.RecurrenceId(f => f.RecurrenceId);
                    //m.Field(f => f.OriginalGoogle);
                    //m.Field(f => f.OriginalOutlook);
                })
                .Read("Read", "Scheduler")
                .Create("Create_Event", "Scheduler")
                .Destroy("Destroy_Event", "Scheduler")
                .Update("Update_Event", "Scheduler")
                )
                .BindTo(Model)
)

 

function onDataBound(e) {
    var recurring = $('.k-i-reload').closest('.k-event');

    recurring.on('dblclick', function() {
        setTimeout(function() {
            $('.k-scheduler-Editcurrentoccurrence').on('click', function() {
                console.log('Editcurrentoccurrence');
            });

            $('.k-scheduler-Edittheseries').on('click', function() {
                console.log('Edittheseries');
            });
        });
    });
};

[Veselin Tsvetanov]

Hello Brent,

Attached you will find a simple project based on the snippets sent, in which the two click handlers are executed properly. You will notice that I have removed the resources for simplicity. The important change was to also remove the BindTo() call, which is redundant in when the widget is configured with remote binding (DtaSource).

Regards,
Veselin Tsvetanov
Progress Telerik

[n/a]

Thank you, this helped but I have another question. I would like to edit the text of the "edit recurrence" buttons for certain events. As it stands right now I have certain events that are read only and I would like to change the text of these buttons from "edit" to "view" as edit would not make sense. Is there a way I might be able to do this?

[Veselin Tsvetanov]

Hello Brent,

You could alter the text of the two buttons by handling the same dataBound event of the Scheduler:

function onDataBound(e) {
    var recurring = $('.k-i-reload').closest('.k-event');

    recurring.on('dblclick', function () {
        setTimeout(function () {
            $('.k-scheduler-Editcurrentoccurrence').text("View current occurrence");
            $('.k-scheduler-Edittheseries').text("View entire series");

            $('.k-scheduler-Editcurrentoccurrence').on('click', function () {
                console.log('Editcurrentoccurrence');
            });

            $('.k-scheduler-Edittheseries').on('click', function () {
                console.log('Edittheseries');
            });
        });
    });
}

Attached you will find a modified version of the sample already discussed, implementing the above suggestion.

Regards,
Veselin Tsvetanov
Progress Telerik