Multiselect wtih custom data adaptor filtering

[Lukasz Pazdziorek]

Hi,

I am using Syncfusion.Blazor Version="19.4.0.55. I have problems with MultiselectDropdown with Custom Data Adaptor and Filtering. I need to pass some external parameters to filter a subset of group of employees

I have the following MultiselectDropdown definition:

<SfMultiSelect ID="EmployeeIds"
               TItem="Employee"
               TValue="List"
               @bind-Value="@EmployeeIds"
               Mode="VisualMode.Box"
               AllowCustomValue="false"
               ShowDropDownIcon="false"
               AllowFiltering="true"
               Placeholder="Search for employees..."
               EnableVirtualization="true"
               Query="@EmployeeQuery"
               Enabled="@Enabled">
    <SfDataManager AdaptorInstance="@typeof(EmployeesAllForDropdownAdaptor)" Adaptor="Adaptors.CustomAdaptor"/>
    <MultiSelectFieldSettings Text="@nameof(Employee.DisplayFullInfo)" Value="@nameof(Employee.Id)">MultiSelectFieldSettings>
    <MultiSelectEvents TValue="List" TItem="Employee" Filtering="@FilteringHandler" ValueChange="OnChange">MultiSelectEvents>
SfMultiSelect>



I have looked into the following page for an example:

https://blazor.syncfusion.com/documentation/multiselect-dropdown/filtering

but it only shows example of custom filtering with local data binding and not with custom dat adaptor.

I have created the following Filtering Handler method to pass the employee status to the adaptor as query parameter:

[Parameter]
public int? EmployeeActiveStatus { get; set; } = (int)EActiveStatus.Active;

private Query EmployeeQuery = new Query().Take(20);

private void FilteringHandler(FilteringEventArgs args)

{

    EmployeeQuery = new Query().AddParams("EmployeeActiveStatus", EmployeeActiveStatus);

}

Then I have the following code in the Custom Adaptor:

public override async Task<object> ReadAsync(DataManagerRequest dm, string key = null)
{
    using var employeeService = _serviceFactory.CreateEmployeeService();

    string queryString = null;
    int? employeeActiveStatus = (int)EActiveStatus.Active;
    
    if (dm?.Where != null)
    {
        queryString = (string)dm.Where.FirstOrDefault(i => i.Field == nameof(Employee.DisplayFullInfo))?.value;
    }

    if (queryString == null || queryString.Length < 2)
        return new List<Employee>();

    if (dm?.Params != null)
    {
        if (dm.Params.ContainsKey("EmployeeActiveStatus"))
        {
            var employeeStatusParam = dm.Params["EmployeeActiveStatus"];
            employeeActiveStatus =  ((JsonElement)employeeStatusParam).GetInt32();
        }
    }
    
    var employees = employeeService.GetEmployees( new EmployeesFilter{ActiveStatus = employeeActiveStatus});

    employees = employees.Where(e =>
        e.ExternalId.Contains(queryString) || e.LastName.Contains(queryString) ||
        e.FirstName.Contains(queryString));

    var count = 0;
    if (dm.RequiresCounts)
        count = employees.Count();

    
    if (dm.Skip != 0)
    {
        employees = DataOperations.PerformSkip(employees, dm.Skip);
    }

    if (dm.Take != 0)
    {
        employees = DataOperations.PerformTake(employees, dm.Take);
    }
    
    var result = await employees
        .Select(e => new Employee
        {
            Id = e.Id,
            ExternalId = e.ExternalId,
            LastName = e.LastName,
            FirstName = e.FirstName
        }).ToListAsync();
    
    return dm.RequiresCounts
        ? new DataResult() { Result = result , Count = count }
        : result;
}

It works fine with the first item (employee) selected. But once I try to search and select the second one the ReadAsync() method falls into infinite loop and the whole app is hanging.

Could you explain what is wrong in th ecode above?

Can you please suggest how custom filtering should be done in from multiselect and custom data adaptor?

An example of suing custom query with the custom adaptor would be great

Thank you for your help.

Cheers,

Łukasz

[Sureshkumar P]

Hi Lukasz, 

 

We can customize the filtering action with help of Filter() method as mentioned in the below code example. 

 

Find the code example here: 

<SfMultiSelect @ref="autoObj" TValue="string[]" AllowFiltering="true" 

                TItem="Order" Query="Query"> 

    <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" 

                                          Adaptor="@Syncfusion.Blazor.Adaptors.CustomAdaptor"></SfDataManager> 

    <MultiSelectFieldSettings Value="CustomerID"></MultiSelectFieldSettings> 

    <MultiSelectEvents TValue="string[]" TItem="Order" Filtering="OnFilter"></MultiSelectEvents> 

</SfMultiSelect> 

 

public async Task OnFilter(FilteringEventArgs args) 

    { 

 

        args.PreventDefaultAction = true; 

            var Query = new Query().Where(new WhereFilter() 

            { 

 

                Field = "CustomerID", 

 

                value = args.Text, 

 

                Operator = "contains", 

 

                IgnoreCase = true 

 

            }).Take(10); 

 

            await this.autoObj.Filter(this.autoObj.DataSource, Query); 

    } 

 

Find the sample with custom filtering: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_DropDowns-2124296091  

 

Regards, 

Sureshkumar P 

[Lukasz Pazdziorek]

Thank you for the prompt response!

I was trying to use Filter() method but was did not know what shall I pass as  DataSource. In my case with custom adaptor there is no explicit DataSource configured and I was not able to find the example on the web. Now I see that what shall I pass. Would be good to add such example on the web.

[Sureshkumar P]

Hi Lukasz, 

Thanks for your suggestion. We will add the provided sample to our documentation in any one of our upcoming updates.  

Regards, 

Sureshkumar P