Unplanned
Last Updated: 14 Jul 2021 16:11 by Annabel
Stefan
Created on: 14 Jan 2021 17:48
Category: Scheduler
Type: Feature Request
11
Ability to directly edit an occurence or the series, without the prompt asking you to choose

I'm in the same situation as the OP in this post: https://www.telerik.com/forums/how-do-you-always-edit-series-when-editing-a-recurring-appointment


In my case, I'm working with with the Blazor Scheduler Component. How can I disable the prompt and automatically select "Edit the series"? Or at least "disable" the "Edit this occurrence" button when updating/deleting an appointment? 

---

ADMIN EDIT

Note: You may also check the Differentiate "edit current occurrence" and "edit the series" in the RecurrenceDialog feature request as the implementation of both features will most likely be covered in one release.

Please comment with suggestions on how you would like to see this feature exposed. Ideally it might have to be dynamic so you can toggle it based on conditions, so perhaps it could be a parameter (not flexible), an event argument to OnEdit, or a separate event/setting.

Here is a sample code you can try to achieve this - comments in the code explain how the templates are used to capture the edit action and some JS is used to fake-click the button to simulate a user choice:

 

@inject IJSRuntime _jsInterop
@* this errors suppression is a hack to make this sample succinct
    move this script to a proper place for a real app*@
<script suppress-error="BL9992">
    function clickSchedulerPromptButton(btnIndex) {
        setTimeout(function () {
            var buttons = document.querySelectorAll(".k-dialog-content .text-right button");
            if (buttons && buttons.length >= btnIndex) {
                var chosenButton = buttons[btnIndex];
                chosenButton.click();
            }
        }, 50);
    }
</script>

@* appearance setting for the template - make the custom template tall as the appointment to capture all clicks *@
<style>
    .tallAppt {
        height: 100%;
    }
</style>

<TelerikScheduler Data="@Appointments"
                  OnUpdate="@UpdateAppointment"
                  OnCreate="@AddAppointment"
                  OnDelete="@DeleteAppointment"
                  AllowCreate="true" AllowDelete="true" AllowUpdate="true"
                  @bind-Date="@StartDate" Height="600px" @bind-View="@CurrView">
    <ItemTemplate>
        @{
            SchedulerAppointment appt = context as SchedulerAppointment;
        }
        <div title="@appt.Start - @appt.End" class="tallAppt" @ondblclick="@( () => ChooseEditMode(appt) )"><div class="k-event-template">@appt.Title</div></div>
    </ItemTemplate>
    <AllDayItemTemplate>
        @{
            SchedulerAppointment appt = context as SchedulerAppointment;
        }
        <div title="@appt.Start.ToShortDateString() - @appt.Title" class="tallAppt" @ondblclick="@( () => ChooseEditMode(appt) )"><div class="k-event-template">@appt.Title</div></div>
    </AllDayItemTemplate>
    <SchedulerViews>
        <SchedulerDayView StartTime="@DayStart" />
        <SchedulerWeekView StartTime="@DayStart" />
        <SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
    </SchedulerViews>
</TelerikScheduler>

@code {
    //async void so we don't block the execution
    //we will have a small timeout in the script to let it wait for the popup
    async void ChooseEditMode(SchedulerAppointment appt)
    {
        // check if we have a recurring appointment or a member of one
        if (appt.RecurrenceId != null || !string.IsNullOrEmpty(appt.RecurrenceRule))
        {
            int btnIndexToClick = 0;//the first button - edit instance
                                    // make it 1 for the second button - the series

            await _jsInterop.InvokeVoidAsync("clickSchedulerPromptButton", btnIndexToClick);
        }

    }

    //the rest is sample data and sample CUD operations handling



    // sample data and scheduler settings
    public SchedulerView CurrView { get; set; } = SchedulerView.Week;
    public DateTime StartDate { get; set; } = new DateTime(2019, 12, 2);
    public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0); //the time portion is important

    List<SchedulerAppointment> Appointments { get; set; }

    async Task UpdateAppointment(SchedulerUpdateEventArgs args)
    {
        SchedulerAppointment item = (SchedulerAppointment)args.Item;

        await MyService.Update(item);
        await GetSchedulerData();
    }

    async Task AddAppointment(SchedulerCreateEventArgs args)
    {
        SchedulerAppointment item = args.Item as SchedulerAppointment;

        await MyService.Create(item);
        await GetSchedulerData();
    }

    async Task DeleteAppointment(SchedulerDeleteEventArgs args)
    {
        SchedulerAppointment item = (SchedulerAppointment)args.Item;

        await MyService.Delete(item);
        await GetSchedulerData();
    }






    public class SchedulerAppointment
    {
        public Guid Id { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public List<DateTime> RecurrenceExceptions { get; set; }
        public Guid? RecurrenceId { get; set; }

        public SchedulerAppointment()
        {
            Id = Guid.NewGuid();
        }
    }

    async Task GetSchedulerData()
    {
        Appointments = await MyService.Read();
    }

    protected override async Task OnInitializedAsync()
    {
        await GetSchedulerData();
    }

    // the following static class mimics an actual data service that handles the actual data source
    // replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
    public static class MyService
    {
        private static List<SchedulerAppointment> _data { get; set; } = new List<SchedulerAppointment>()
{
            new SchedulerAppointment
            {
                Title = "Board meeting",
                Description = "Q4 is coming to a close, review the details.",
                Start = new DateTime(2019, 12, 5, 10, 00, 0),
                End = new DateTime(2019, 12, 5, 11, 30, 0)
            },

            new SchedulerAppointment
            {
                Title = "Vet visit",
                Description = "The cat needs vaccinations and her teeth checked.",
                Start = new DateTime(2019, 12, 2, 11, 30, 0),
                End = new DateTime(2019, 12, 2, 12, 0, 0)
            },

            new SchedulerAppointment
            {
                Title = "Planning meeting",
                Description = "Kick off the new project.",
                Start = new DateTime(2019, 12, 6, 9, 30, 0),
                End = new DateTime(2019, 12, 6, 12, 45, 0)
            },

            new SchedulerAppointment
            {
                Title = "Trip to Hawaii",
                Description = "An unforgettable holiday!",
                IsAllDay = true,
                Start = new DateTime(2019, 11, 27),
                End = new DateTime(2019, 12, 05)
            },

            new SchedulerAppointment
            {
                Title = "Morning run",
                Description = "Some time to clear the head and exercise.",
                Start = new DateTime(2019, 11, 27, 9, 0, 0),
                End = new DateTime(2019, 11, 27, 9, 30, 0),
                RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR"
            }
        };

        public static async Task Create(SchedulerAppointment itemToInsert)
        {
            itemToInsert.Id = Guid.NewGuid();
            _data.Insert(0, itemToInsert);
        }

        public static async Task<List<SchedulerAppointment>> Read()
        {
            return await Task.FromResult(_data);
        }

        public static async Task Update(SchedulerAppointment itemToUpdate)
        {
            var index = _data.FindIndex(i => i.Id == itemToUpdate.Id);
            if (index != -1)
            {
                _data[index] = itemToUpdate;
            }
        }

        public static async Task Delete(SchedulerAppointment itemToDelete)
        {
            if (itemToDelete.RecurrenceId != null)
            {
                // a recurrence exception was deleted, you may want to update
                // the rest of the data source - find an item where theItem.Id == itemToDelete.RecurrenceId
                // and remove the current exception date from the list of its RecurrenceExceptions
            }

            if (!string.IsNullOrEmpty(itemToDelete.RecurrenceRule) && itemToDelete.RecurrenceExceptions?.Count > 0)
            {
                // a recurring appointment was deleted that had exceptions, you may want to
                // delete or update any exceptions from the data source - look for
                // items where theItem.RecurrenceId == itemToDelete.Id
            }

            _data.Remove(itemToDelete);
        }
    }
}

 

---

4 comments
Annabel
Posted on: 14 Jul 2021 16:11
I have a couple of notes. First, resolving this issue would probably lessen the need for this ability, because if a custom EditHandler could meaningfully differentiate between the choices then both choices could be supported. Second, exposing a prompt handler that works the same way as the EditHandler seems like the cleanest way for users to adjust the behavior of this prompt.
ADMIN
Marin Bratanov
Posted on: 18 Jan 2021 12:04

Hello Stefan,

I deleted the mention of the custom form as that will, indeed, come up after the prompt. There is, at the moment, no way to capture that prompt - the only approach I can come up with is using appointment templates to capture the editing event (double click), and to use some JS interop to simulate the user action.

As for the Delete event firing - it fires for both recurring appointments and exceptions, you can tell which event triggered it by reviewing the fields of the model. You can find examples of that in the documentation: https://docs.telerik.com/blazor-ui/components/scheduler/edit-appointments#example. I suggest you run this sample with our latest version and see how it behaves. Then, compare the problematic project with it to see what is the difference causing the problem on your end. If this does not help you solve the problem, I advise you open a support ticket with the modified sample from the article that showcases the problem, so we can have a look.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Stefan
Posted on: 18 Jan 2021 11:03

Hi Marin,

First of all, thank you for the quick response.

The way it gets implemented doesn't really matter to me. But I do feel that the way it currently behaves isn't 100% right.

For example: when deleting a single Recurring event, the "OnDelete" handler does not seem to get called. Might I suggest also exposing a Handler for Removing/Updating a "Single Occurrence"? Or simply routing this through the same handler (f.e. OnDelete) and f.e. adding a bool "IsRecurring" to the event arguments?

As for the suggested workaround with the Custom Edit Form; there does not seem to be a handler being called before the Confirmation prompt gets shown. I'm currently using a Custom Edit Form and this form only gets triggered in the OnEdit handler after either the "Edit Single occurrence" or "Edit Series" button gets clicked.

As for the presented example approach; thank you! I will try and implement it later this week and get back to you with my findings.

ADMIN
Marin Bratanov
Posted on: 18 Jan 2021 10:07

Hi Stefan,

I just updated the opener post with a workaround that you can try. 

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.