How to access edit recurrence buttons Scheduler recurrence editor

6 posts, 0 answers
  1. Brent Sheppard
    Brent Sheppard avatar
    12 posts
    Member since:
    Oct 2018

    Posted 05 Nov 2018 Link to this post

    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.
  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    992 posts

    Posted 07 Nov 2018 Link to this post

    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.
  3. Brent Sheppard
    Brent Sheppard avatar
    12 posts
    Member since:
    Oct 2018

    Posted 07 Nov 2018 in reply to Veselin Tsvetanov Link to this post

    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');
                });
            });
        });
    };
  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    992 posts

    Posted 08 Nov 2018 Link to this post

    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.
  5. Brent Sheppard
    Brent Sheppard avatar
    12 posts
    Member since:
    Oct 2018

    Posted 14 Nov 2018 Link to this post

    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?
  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    992 posts

    Posted 16 Nov 2018 Link to this post

    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.
Back to Top