Adding Filter Values to the Scheduler's Custom DataAdapter

[Yongkee Cho]

We are utilizing a custom data adapter for the Scheduler component:

<SfSchedule @ref="_scheduler" @bind-SelectedDate="@_selectedDate" TValue="Schedule" Width="auto" Height="auto">
  <ScheduleEventSettings TValue="Schedule" IgnoreWhitespace="true">
    <SfDataManager AdaptorInstance="@typeof(ScheduleDataAdapter)" Adaptor="Syncfusion.Blazor.Adaptors.CustomAdaptor" />
  </ScheduleEventSettings>
</SfSchedule>

The DataAdapter efficiently retrieves schedule data from the database within the specified start and end times of the scheduler's current view.

public class ScheduleDataAdapter(ScheduleDb db) : DataAdaptor
{
    public override async Task<object> ReadAsync(DataManagerRequest dataManagerRequest, string?
additionalParam = null)
    {
        var parameters = dataManagerRequest.Params;
        var start = DateTime.Parse((string)parameters["StartDate"]);
        var end = DateTime.Parse((string)parameters["EndDate"]);

        var schedules = await db.GetSchedulesAsync(start, end);

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

Filtering Schedules by Bench Selections

Our Schedule object includes multiple BenchIds. I want to filter the schedules based on the selections made using the SfMultiSelect control.

public class Schedule
{
    public Guid Id { get; set; }
    public string? Subject { get; set; }
    public string? ReservedBy { get; set; }
    public DateTime StartTime { get; set; }
    public string? StartTimeZone { get; set; }
    public DateTime EndTime { get; set; }
    public string? EndTimeZone { get; set; }
    public string? Location { get; set; }
    public string? Description { get; set; }
    public bool? IsAllDay { get; set; }
    public bool IsReadonly { get; set; }
    public int? RecurrenceId { get; set; }
    public string? RecurrenceRule { get; set; }
    public string? RecurrenceException { get; set; }
    public IList<string>? BenchIds { get; set; }
}

Question

How can I have our custom DataManager filter schedules based on the selected BenchIds from the SfMultiSelect control?

Example

I expect something like below.

public class ScheduleDataAdapter(ScheduleDb db) : DataAdaptor
{
    public override async Task<object> ReadAsync(DataManagerRequest dataManagerRequest, string?
additionalParam = null)
    {
        var parameters = dataManagerRequest.Params;
        var start = DateTime.Parse((string)parameters["StartDate"]);
        var end = DateTime.Parse((string)parameters["EndDate"]);
        var benchIds = ((string)parameters["BenchIds"]).Split(',');

        var schedules = await db.GetSchedulesAsync(start, end, benchIds);

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

Is there any way to add this custom filters over StartDate and EndDate? If not, what would be the best approach?

[Swathi Ravi]

Hi Yongkee Cho,

Thank you for reaching out to us!

You can pass the BenchId as an additional parameter to the CustomAdaptor using the ScheduleEventSettings Query property, as shown in the data shared below.

<SfMultiSelect TValue="int[]" Placeholder="e.g. Australia" TItem="DropDownData" Width="300px" @bind-Value="@DropVal" DataSource="@DropData">

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

    <MultiSelectEvents TValue="int[]" TItem="DropDownData" ValueChange="@OnSelectHandler" />

</SfMultiSelect>

 

<SfSchedule @ref="ScheduleRef" TValue="AppointmentData" Width="100%" Height="650px" SelectedDate="@(new DateTime(2020, 1, 9))">

    <ScheduleResources>

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

        </ScheduleResource>

    </ScheduleResources>

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

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

    </ScheduleEventSettings>

</SfSchedule>

 

@code {

    SfSchedule<AppointmentData> ScheduleRef;

    public static int[] DropVal = new int[] { 1 };

    public Query QueryData = new Query().From("EventDatas").AddParams("BenchId", DropVal);

 

    List<DropDownData> DropData = new List<DropDownData>

    {

        new DropDownData() { Id = 1 },

        new DropDownData() { Id = 2 },

        new DropDownData() {Id = 3 },

        new DropDownData() { Id = 4 },

    };

 

    public async void OnSelectHandler(MultiSelectChangeEventArgs<int[]> args)

    {

        DropVal = args.Value;

 

        // Update the QueryData with the new DropVal

        QueryData = new Query().From("EventDatas").AddParams("BenchId", DropVal);

    }

 

    public class DropDownData

    {

        public int Id { get; set; }

    }

 

    public class CustomAdaptor : DataAdaptor

    {

        List<AppointmentData> EventData = DataList();

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

        {

            await Task.Delay(100); //To mimic asynchronous operation, we delayed this operation using Task.Delay

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

        }

        

    }

}

 

Sample: Attached as a zip file.

UG: https://blazor.syncfusion.com/documentation/scheduler/data-binding#sending-additional-parameters-to-the-server

 

Regards,

Swathi

Attachment: blazorcustomadaptor_b95822b8.zip