Scheduler dynamically add or remove resources with custom adapter

[Yannici]

Hello,

I have an scheduler with appointments and employee's as resource.
The problem is: I want to define the resources which gets displayed dynamically depending on the data which gets load from the custom data adapter. I'm using a non-remote adapter.

Is there an possibility to do this?

I already tried to set an Query for the resource, but updating this query dynamically doesn't update the visibility of the resource.

Regards,
Yannic

[Swathi Ravi]

Hi Yannici,

You can add the resources by using a custom adaptor like the below-shared snippet. And You can add and remove the resources by using the AddResource and RemoveResource methods of the Scheduler as shown in the snippet below.

[index.razor]

<div class="col-lg-12 control-section">

    <SfSchedule @ref="ScheduleRef" TValue="AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">

        <ScheduleGroup Resources="@groupData">

        </ScheduleGroup>

        <ScheduleResources>

            <ScheduleResource TItem="ResourceData" TValue="int" Field="ProjectId" Title="Choose Project" Name="Projects" TextField="Text" IdField="Id" ColorField="Color">

                <SfDataManager AdaptorInstance="@typeof(ResourceCustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

            </ScheduleResource>

        </ScheduleResources>

        <ScheduleEventSettings TValue="AppointmentData">

            <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

        </ScheduleEventSettings>

</SfSchedule>

</div>

 

<div class="col-lg-3 property-section">

    <table id="property" title="Show / Hide Resource" style="width: 100%">

        <tbody>

            <tr style="height: 50px">

                <td style="width: 100%">

                    <SfCheckBox TChecked="bool" @bind-Checked="@IsChecked1" ValueChange="@(e => OnChange(e, 1))" Disabled="true" Label="PROJECT 1"></SfCheckBox>

                </td>

            </tr>

            <tr style="height: 50px">

                <td style="width: 100%">

                    <SfCheckBox TChecked="bool" @bind-Checked="@IsChecked2" ValueChange="@(e => OnChange(e, 2))" Label="PROJECT 2"></SfCheckBox>

                </td>

            </tr>

            <tr style="height: 50px">

                <td style="width: 100%">

                    <SfCheckBox TChecked="bool" @bind-Checked="@IsChecked3" ValueChange="@(e => OnChange(e, 3))"  Label="PROJECT 3"></SfCheckBox>

                </td>

            </tr>

            <tr style="height: 50px">

                <td style="width: 100%">

                    <SfCheckBox TChecked="bool" @bind-Checked="@IsChecked4" ValueChange="@(e => OnChange(e, 4))" Label="PROJECT 4"></SfCheckBox>

                </td>

            </tr>

        </tbody>

    </table>

</div>

 

@code {

   public string[] groupData = new string[] { "Projects" };

    private bool IsChecked1 { get; set; } = true;

    private bool IsChecked2 { get; set; } = false;

    private bool IsChecked3 { get; set; } = false;

    private bool IsChecked4 { get; set; } = false;

 

    public void OnChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args, int value)

    {

        List<ResourceData> ProjectDatas = new List<ResourceData> {

            new ResourceData { Text = "PROJECT 1", Id = 1, Color = "#cb6bb2" },

            new ResourceData { Text = "PROJECT 2", Id = 2, Color = "#56ca85" },

            new ResourceData { Text = "PROJECT 3", Id = 3, Color = "#c43081" },

            new ResourceData { Text = "PROJECT 4", Id = 4, Color = "#AF27CD" }

    };

 

        var resourceData = ProjectDatas.Find(v => v.Id == value);

        if (args.Checked)

        {

            ScheduleRef.AddResource<ResourceData>(new List<ResourceData> { resourceData }, "Projects", value - 1);

        }

        else

        {

            ScheduleRef.RemoveResource<int>(new List<int> { value }, "Projects");

        }

    }

 

    public class ResourceCustomAdaptor : DataAdaptor

    {

        List<ResourceData> ProjectData { get; set; } = new List<ResourceData> {

            new ResourceData { Text = "PROJECT 1", Id = 1, Color = "#cb6bb2" }

        };

        public async override Task<object> ReadAsync(DataManagerRequest dataManagerRequest, string key = null)

        {

            await Task.Delay(100);

            return dataManagerRequest.RequiresCounts ? new DataResult() { Result = ProjectData, Count = ProjectData.Count() } : (object)ProjectData;

        }

        public async override Task<object> InsertAsync(DataManager dataManager, object data, string key)

        {

            await Task.Delay(100);

            ProjectData.Insert(0, data as ResourceData);

            return data;

        }

    }

}

Regards,

Swathi Ravi

Attachment: blazorscheduleraddremoveresourcescustomadapter_f46d1a7b.zip

[Yannici]

Thank you, I will check this out. Didn't know I can use an Custom Adaptor for resources as well.

Short question:

When events gets updated (for example on date navigation), does it execute the resource adaptor ReadAsync-Method again as well? And with RefreshEventsAsync(), does it gets executed too?

[Swathi Ravi]

Yannici,

The ReadAsync method of the resource adapter is only called on the first load. It does not occur during date navigation or when calling the RefreshEventAsync method.