How to use multi select dropdown for schedule resource in a custom editor template

[Yannis]

Hi,

if I don't use a custom editor template, I get a multi select dropdown for one of my resources. If I select multiple resources here, the appointments for the corresponding resources are duplicated. That is the behavior that I want. But I need a custom editor window.

My resource is defined as follows:

<ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@OperatorData" Field="OperatorId" Title="Operator" Name="Operators" TextField="OperatorName" IdField="Id" GroupIDField="OperatorGroupId" AllowMultiple="true" />

So far I have not been able to recreate the same functionality in a custom editor template.

I would be very grateful for a little help here!

Greetings

Yannis

[Ruksar Moosa Sait]

Hi Yannis,

We have checked on your requirement and suggest you to set AllowGroupEdit property as true in ScheduleGroup tag and add the Multiselect dropdown for the Owners(child) field & dropdown for the Rooms(Parent) fields like the below code to meet your requirement.

[Index.razor]

<ScheduleGroup AllowGroupEdit="true" Resources="@Resources"></ScheduleGroup>

<tr>

           <td class="e-textlabel">Room</td>

                     <td colspan="4">

                            <SfDropDownList TValue="int" TItem="ResourceData" ID="RoomId" DataSource="@RoomsData"

                              Placeholder="Choose room" @bind-Value="@((context as AppointmentData).RoomId)">

                              <DropDownListFieldSettings Text="RoomText" Value="Id"></DropDownListFieldSettings>

                            </SfDropDownList>

                     </td>

</tr>

<tr>

            <td class="e-textlabel">Owner</td>

                      <td colspan="4">

                            <SfMultiSelect @ref="ResourceRef" TValue="int[]" TItem="ResourceData" ID="OwnerId" DataSource="@OwnersData"

                               Placeholder="Choose Owner" @bind-Value="@((context as AppointmentData).OwnerId)">

                                <MultiSelectFieldSettings Text="OwnerText" Value="Id"></MultiSelectFieldSettings>

                            </SfMultiSelect>

                        </td>

</tr>

Output:

Kindly try the attached sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

Attachment: BlazorDropdownMultiselect_822584f9.zip

[Yannis]

Hi Ruksar,

Thank you for taking the time to look at this issue. However, the code example is not quite what I am looking for.

My data model does not have an array of OwnerIds. If I don't use a custom template of the editor window everything works exactly as I want it to. For each additional owner a new appointment gets created. So I don't need int[] but int of Owner ID.

Do you have another idea how I could implement this?

[Ruksar Moosa Sait]

Hi Yannis,

We have checked on your requirement and we have achieved your requirement without using the AllowGroupEdit with help of the OnActionBegin, OnPopupOpen, and OnPopupClose events of the Schedule as shown in the below code snippet by creating a list of appointments based on the selected resources and updating the list of appointments on the OnActionBegin event AddedRecords property.

[Index.razor]

<td colspan="4">

         <SfMultiSelect TValue="int[]" TItem="ResourceData" ID="OwnerId" Placeholder="Choose Owner"

               DataSource="@OwnersData" @bind-Value="@OwnersValue">

         <MultiSelectFieldSettings Text="OwnerText" Value="Id"></MultiSelectFieldSettings>

        </SfMultiSelect>

</td>

public void OnPopupOpen(PopupOpenEventArgs<AppointmentData> args)

    {

        if (args.Data != null && args.Type == PopupType.Editor)

        {

            OwnersValue = new int[] { args.Data.OwnerId };

        }

    }

public void OnPopupClose(PopupCloseEventArgs<AppointmentData> args)

    {

        if (args.Data != null && args.Type == PopupType.Editor)

        {

            args.Data.OwnerId = OwnersValue.First();

        }

    }

public async void OnActionBegin(ActionEventArgs<AppointmentData> args)

    {

        if (args.ActionType == ActionType.EventCreate && OwnersValue != null && OwnersValue.Length > 1)

        {

            List<AppointmentData> Data = new List<AppointmentData>();

            for (int i = 1; i < OwnersValue.Length; i++)

            {

                Data.Add(new AppointmentData

                    {

                        Id = await ScheduleRef.GetMaxEventIdAsync<int>(),

                        Subject = args.AddedRecords[0].Subject,

                        StartTime = args.AddedRecords[0].StartTime,

                        EndTime = args.AddedRecords[0].EndTime,

                        OwnerId = OwnersValue[i],

                        RoomId = args.AddedRecords[0].RoomId

                    });

            }

            args.AddedRecords.AddRange(Data);

        }      

}

Kindly try the attached sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

Attachment: BlazorEditorTemplatewithResources_848b7953.zip

[Yannis]

Hi,

thanks again for your support here.... I appreciate it very much! Your code example fits for my requirement described so far.

However, as always, it is unfortunately still a bit more complicated...

I work with remote data and perform CRUD actions. My backend API looks similar to the one from your documentation (https://blazor.syncfusion.com/documentation/scheduler/data-binding#creating-odata-controller). 

So far I have tried to implement it as follows:

public async void OnActionBegin(ActionEventArgs<AppointmentData> args)
    {
        if (args.ActionType == ActionType.EventCreate && OwnersValue != null && OwnersValue.Length > 1)
        {
            for (int i = 1; i < OwnersValue.Length; i++)
            {
                AppointmentData newAppointment = new AppointmentData
                {
                    Subject = args.AddedRecords[0].Subject,
                    StartTime = args.AddedRecords[0].StartTime,
                    EndTime = args.AddedRecords[0].EndTime,
                    OwnerId = OwnersValue[i],
                    RoomId = args.AddedRecords[0].RoomId
                };

                await ScheduleRef!.AddEventAsync(newAppointment);
            }
        }
    }

The Appointment ID is assigned in the backend of EF Core. Unfortunately I get the following error message when I try to execute the code:

Assertion at /__w/1/s/src/mono/mono/metadata/loader.c:1806, condition `<disabled>' not met


* Assertion at /__w/1/s/src/mono/mono/metadata/loader.c:1806, condition `<disabled>' not met


Uncaught ExitStatus ExitStatus
    at v (https://localhost:44342/swsdesigner/_framework/blazor.webassembly.js:1:2297)
    at b (https://localhost:44342/swsdesigner/_framework/blazor.webassembly.js:1:2039)
    at invokeMethodAsync (https://localhost:44342/swsdesigner/_framework/blazor.webassembly.js:1:3845)
    at <anonymous> (https://localhost:44342/swsdesigner/_framework/blazor.webassembly.js:1:11361)
    at invokeWhenHeapUnlocked (https://localhost:44342/swsdesigner/_framework/blazor.webassembly.js:1:44842)
    at A (https://localhost:44342/swsdesigner/_framework/blazor.webassembly.js:1:56229)
    at N (https://localhost:44342/swsdesigner/_framework/blazor.webassembly.js:1:11330)
    at dispatchGlobalEventToAllElements (https://localhost:44342/swsdesigner/_framework/blazor.webassembly.js:1:13819)
    at onGlobalEvent (https://localhost:44342/swsdesigner/_framework/blazor.webassembly.js:1:13078)

I have taken another close look at how it works without the custom editor window.

If I want to create a fresh appointment and directly specify multiple owners, no action is executed with a click on Save. I can only close the window. If I specify only one owner, the appointment is correctly sent to the backend and saved in the database. Afterwards I can edit the created appointment and add multiple owners. These appointments are then also correctly saved in the database. I have tried different approaches to implement the same functionality with the OnActionBegin method, but so far without success.

Do you guys have another smart idea that could help me out here?

Greeting

Yannis

[Ruksar Moosa Sait]

Hi Yannis,

We have prepared a sample to check your reported issue and but unfortunately, we are unable able to reproduce the reported issue at our end.

[Index.razor] - Sample Project

<ScheduleEventSettings TValue="AppointmentData" Query="@QueryData">

<SfDataManager Url=http://localhost:9876/odata/ Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>

</ScheduleEventSettings>

for (int i = 1; i < OwnersValue.Length; i++)

            {

                AppointmentData newAppointment = new AppointmentData

                    {

                        Subject = args.AddedRecords[0].Subject,

                        StartTime = args.AddedRecords[0].StartTime,

                        EndTime = args.AddedRecords[0].EndTime,

                        OwnerId = OwnersValue[i],

                        RoomId = args.AddedRecords[0].RoomId

                    };

                Data.Add(newAppointment);              

            }

            args.AddedRecords.AddRange(Data);

• Instead of await ScheduleRef!.AddEventAsync(newAppointment) we suggest you to add(push) the new appointment data in the default DataSource list.
• Make sure the Model class has the same fields in both the sample and the service.

[ScheduleDataContext.cs] – Service Project

protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)

        {

            if (!optionsBuilder.IsConfigured)

            {

                string filePath = "D:\\Ruksar M\\blazor-scheduler-crud\\blazor-scheduler-crud\\SchedulerCRUD";

                optionsBuilder.UseSqlServer("Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=" + filePath + \\App_Data\\ScheduleData.mdf;Integrated Security=True);

            }

        }

Note: You need to change the filePath according to your database to establish the connection.

Sample and Service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SC232A~11739068379

Kindly try the attached sample and service and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait