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

How to access edit recurrence buttons Scheduler recurrence editor

5 Answers 298 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 05 Nov 2018, 02:39 PM
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.

5 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 07 Nov 2018, 08:23 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
n/a
Top achievements
Rank 1
answered on 07 Nov 2018, 04:59 PM
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');
            });
        });
    });
};
0
Veselin Tsvetanov
Telerik team
answered on 08 Nov 2018, 02:15 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
n/a
Top achievements
Rank 1
answered on 14 Nov 2018, 06:16 PM
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?
0
Veselin Tsvetanov
Telerik team
answered on 16 Nov 2018, 08:15 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Scheduler
Asked by
n/a
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
n/a
Top achievements
Rank 1
Share this question
or