Add filtering action with multi columns.

Author: saravanangn

Client/BlazorWASAM-Multi-Column.Client.csproj

@@ -10,7 +10,8 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0" PrivateAssets="all" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.0" PrivateAssets="all" />
-    <PackageReference Include="Syncfusion.Blazor" Version="18.1.0.53" />
+    <PackageReference Include="Syncfusion.Blazor.DropDowns" Version="20.2.0.46" />
+    <PackageReference Include="Syncfusion.Blazor.Themes" Version="20.2.0.46" />
     <PackageReference Include="System.Net.Http.Json" Version="3.2.0" />
   </ItemGroup>
 

Client/Pages/Index.razor

@@ -13,7 +13,7 @@ Welcome to your new app.
     <div class="control-section col-lg-12">
         <div id="remote-data" class="col-lg-6">
             <div class="content">
-                <SfComboBox TValue="string" TItem="Product" PopupWidth="700px" DataSource="@_productsList" PopupHeight="400px" CssClass="e-multi-column" Placeholder="Select a Product">
+                <SfComboBox @ref="selectProduct" TValue="string" TItem="Product" PopupWidth="700px" DataSource="@_productsList" PopupHeight="400px" CssClass="e-multi-column" Placeholder="Select a Product" AllowFiltering="true">
                     <ComboBoxTemplates TItem="Product">
                         <HeaderTemplate>
                             <table><tr><th class="e-text-center">Product ID</th><th width="240px">Product Name</th><th>Unit Price</th><th>Units In Stock</th><th>Units On Order</th></tr></table>
@@ -23,6 +23,7 @@ Welcome to your new app.
                         </ItemTemplate>
                     </ComboBoxTemplates>
                     <ComboBoxFieldSettings Text="ProductName" Value="ProductID"></ComboBoxFieldSettings>
+                    <ComboBoxEvents TValue="string" TItem="Product" Filtering="OnFiltering"></ComboBoxEvents>
                 </SfComboBox>
             </div>
         </div>
@@ -31,10 +32,30 @@ Welcome to your new app.
 
 @code{
 
+    SfComboBox<string, Product> selectProduct;
+
     private Product[] _productsList;
 
     protected override async Task OnInitializedAsync()
     {
         _productsList = await Http.GetFromJsonAsync<Product[]>("Product");
     }
+    // Filter event
+    private async Task OnFiltering(FilteringEventArgs args)
+    {
+        //Prevent the default filtering action and make custom seacrh.
+        args.PreventDefaultAction = true;
+        var CustomSearch = new WhereFilter();
+        var predicate = new List<WhereFilter>();
+        // Add multiple predicate and make filter action in multiple columns.
+        predicate.Add(new WhereFilter() { Condition = "or", Field = "ProductName", value = args.Text, Operator = "contains", IgnoreCase = true });
+        predicate.Add(new WhereFilter() { Condition = "or", Field = "UnitPrice", value = args.Text, Operator = "contains", IgnoreCase = true });
+        predicate.Add(new WhereFilter() { Condition = "or", Field = "UnitsInStock", value = args.Text, Operator = "contains", IgnoreCase = true });
+        predicate.Add(new WhereFilter() { Condition = "or", Field = "UnitsOnOrder", value = args.Text, Operator = "contains", IgnoreCase = true });
+        CustomSearch = WhereFilter.Or(predicate);
+        var query = new Query().Where(CustomSearch);
+        // call the FilterAsync public method and pass the data source and modified query.
+        await selectProduct.FilterAsync(_productsList, query);
+    }
+
 }

Client/wwwroot/index.html

@@ -8,7 +8,8 @@
     <base href="/" />
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
     <link href="css/app.css" rel="stylesheet" />
-    <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
+    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 
 <body>