multi-column filter for Sfdropdownlist

[Jacky]

Hi Support ,

I follow the help document set  for multi-column filter by Sfdropdownlist seems not work ,  is there sample for reference ?

AllowFiltering="true" 

CssClass="e-multi-column"

https://blazor.syncfusion.com/documentation/dropdown-list/filtering#multi-column-filtering

Thanks!

Jacky

[Yohapuja Selvakumaran]

Hi Jacky,

Thank you for reaching out to us. We have created a sample based on your requirements to perform multicolumn filtering in the dropdownlist component. You can achieve multicolumn filtering by passing a list of predicates to the And or Or methods of WhereFilters. Please find the code snippet below for reference.

 

 

@using Syncfusion.Blazor.Data

@using Syncfusion.Blazor.DropDowns

 

<SfDropDownList @ref="DropObj" TValue="string" Width="300px" TItem="Countries" Placeholder="e.g. Australia" PopupHeight="200px" CssClass="e-multi-column" DataSource="@Country" AllowFiltering="true">

    <DropDownListFieldSettings Value="Code" Text="Name"></DropDownListFieldSettings>

    <DropDownListTemplates TItem="Countries">

        <HeaderTemplate>

            <table><tr><th>Name</th><th>Position</th></tr></table>

        </HeaderTemplate>

        <ItemTemplate>

            <table><tbody><tr>

    <td>@((context as Countries).Name)</td>

    <td>@((context as Countries).Job)</td>

</tr> </tbody></table>

        </ItemTemplate>

    </DropDownListTemplates>

     <DropDownListEvents TValue="string" TItem="Countries" Filtering="OnFiltering"></DropDownListEvents>

</SfDropDownList>

@code{

    SfDropDownList<string, Countries> DropObj;

    public class Countries

    {

        public string Name { get; set; }

        public string Code { get; set; }

        public string Job { get; set; }

 

    }

    List<Countries> Country = new List<Countries>

    {

        new Countries() { Name = "Australia", Code = "AU",Job= "Team Lead" },

        new Countries() { Name = "Bermuda", Code = "BM",Job="Developer"  },

        new Countries() { Name = "Canada", Code = "CA",Job="CEO"  },

        new Countries() { Name = "Cameroon", Code = "CM" ,Job="HR" },

        new Countries() { Name = "Denmark", Code = "DK",Job="Product Manager"  },

        new Countries() { Name = "France", Code = "FR",Job="Developer"  },

        new Countries() { Name = "Finland", Code = "FI",Job="Team Lead"  },

        new Countries() { Name = "Germany", Code = "DE",Job="Product Manager"  },

        new Countries() { Name = "Greenland", Code = "GL",Job="Developer"  },

        new Countries() { Name = "Hong Kong", Code = "HK",Job="CEO"  },

        new Countries() { Name = "India", Code = "IN",Job="HR"  },

        new Countries() { Name = "Italy", Code = "IT",Job="Team Lead"  },

        new Countries() { Name = "Japan", Code = "JP",Job="Developer"  },

        new Countries() { Name = "Mexico", Code = "MX",Job="Product Manager"  },

        new Countries() { Name = "Norway", Code = "NO",Job="HR"  },

        new Countries() { Name = "Poland", Code = "PL",Job="Team Lead"  },

        new Countries() { Name = "Switzerland", Code = "CH",Job="Product Manager"  },

        new Countries() { Name = "United Kingdom", Code = "GB",Job="CEO"  },

        new Countries() { Name = "United States", Code = "US",Job="Developer"  },

    };

 

    public async Task OnFiltering(Syncfusion.Blazor.DropDowns.FilteringEventArgs args)

    {

        args.PreventDefaultAction = true;

        var pre = new WhereFilter();

        var predicate = new List<WhereFilter>();

        predicate.Add(new WhereFilter() { Condition = "or", Field = "Name", value = args.Text, Operator = "startswith", IgnoreAccent = true, IgnoreCase = true });

        predicate.Add(new WhereFilter() { Condition = "or", Field = "Job", value = args.Text, Operator = "startswith", IgnoreAccent = true, IgnoreCase = true });

        pre = WhereFilter.Or(predicate);

        var query = new Query().Where(pre);

        await this.DropObj.FilterAsync(Country, query);

    }

}

 

The sample demonstrates how to filter the dropdownlist based on the "Name" and "Job" columns using the provided text input. The use of predicates and the Or method effectively combines the conditions for filtering.

For further reference, kindly check out the below sample:

Sample: https://blazorplayground.syncfusion.com/rZBpXLsaUkNWkLld

For further exploration and clarification, users can refer to the following documentation with predicates for multicolumn filtering

 

Documentation: https://blazor.syncfusion.com/documentation/dropdown-list/filtering#multi-column-filtering

Regards,

Yohapuja S

[Jacky]

Hi  Yohapuja ,

Thanks your quickly reply, I will try all reference.

Best Regards!

Jacky