Update the project

Client/App.razor

@@ -1,10 +1,12 @@
-<Router AppAssembly="@typeof(Program).Assembly">
-    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-    </Found>
-    <NotFound>
-        <LayoutView Layout="@typeof(MainLayout)">
-            <p>Sorry, there's nothing at this address.</p>
-        </LayoutView>
-    </NotFound>
-</Router>
+<Router AppAssembly="@typeof(App).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+    </Found>
+    <NotFound>
+        <PageTitle>Not found</PageTitle>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p role="alert">Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>

Client/MultiColumnComboBoxSample.Client.csproj

@@ -0,0 +1,20 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+  <PropertyGroup>
+    <TargetFramework>net7.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.2" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.2" PrivateAssets="all" />
+    <PackageReference Include="Syncfusion.Blazor.DropDowns" Version="23.1.39" />
+    <PackageReference Include="Syncfusion.Blazor.Themes" Version="23.1.39" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\Shared\MultiColumnComboBoxSample.Shared.csproj" />
+  </ItemGroup>
+
+</Project>

Client/Pages/Counter.razor

@@ -1,16 +1,18 @@
-@page "/counter"
-
-<h1>Counter</h1>
-
-<p>Current count: @currentCount</p>
-
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
-
-@code {
-    private int currentCount = 0;
-
-    private void IncrementCount()
-    {
-        currentCount++;
-    }
-}
+@page "/counter"
+
+<PageTitle>Counter</PageTitle>
+
+<h1>Counter</h1>
+
+<p role="status">Current count: @currentCount</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+
+@code {
+    private int currentCount = 0;
+
+    private void IncrementCount()
+    {
+        currentCount++;
+    }
+}

Client/Pages/FetchData.razor

@@ -1,46 +1,47 @@
-@page "/fetchdata"
-@using BlazorWASAM_Multi_Column.Shared
-@inject HttpClient Http
-
-<h1>Weather forecast</h1>
-
-<p>This component demonstrates fetching data from the server.</p>
-
-@if (forecasts == null)
-{
-    <p><em>Loading...</em></p>
-}
-else
-{
-    <table class="table">
-        <thead>
-            <tr>
-                <th>Date</th>
-                <th>Temp. (C)</th>
-                <th>Temp. (F)</th>
-                <th>Summary</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var forecast in forecasts)
-            {
-                <tr>
-                    <td>@forecast.Date.ToShortDateString()</td>
-                    <td>@forecast.TemperatureC</td>
-                    <td>@forecast.TemperatureF</td>
-                    <td>@forecast.Summary</td>
-                </tr>
-            }
-        </tbody>
-    </table>
-}
-
-@code {
-    private WeatherForecast[] forecasts;
-
-    protected override async Task OnInitializedAsync()
-    {
-        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
-    }
-
-}
+@page "/fetchdata"
+@using MultiColumnComboBoxSample.Shared
+@inject HttpClient Http
+
+<PageTitle>Weather forecast</PageTitle>
+
+<h1>Weather forecast</h1>
+
+<p>This component demonstrates fetching data from the server.</p>
+
+@if (forecasts == null)
+{
+    <p><em>Loading...</em></p>
+}
+else
+{
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Date</th>
+                <th>Temp. (C)</th>
+                <th>Temp. (F)</th>
+                <th>Summary</th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach (var forecast in forecasts)
+            {
+                <tr>
+                    <td>@forecast.Date.ToShortDateString()</td>
+                    <td>@forecast.TemperatureC</td>
+                    <td>@forecast.TemperatureF</td>
+                    <td>@forecast.Summary</td>
+                </tr>
+            }
+        </tbody>
+    </table>
+}
+
+@code {
+    private WeatherForecast[]? forecasts;
+
+    protected override async Task OnInitializedAsync()
+    {
+        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
+    }
+}

Client/Pages/Index.razor

@@ -1,61 +1,61 @@
-@page "/"
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.DropDowns
-@using Syncfusion.Blazor.Data
-@using BlazorWASAM_Multi_Column.Shared;
-@inject HttpClient Http
-
-<h1>Multi-column ComboBox!</h1>
-
-Welcome to your new app.
-
-<div id="ControlRegion">
-    <div class="control-section col-lg-12">
-        <div id="remote-data" class="col-lg-6">
-            <div class="content">
-                <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>
-                        </HeaderTemplate>
-                        <ItemTemplate>
-                            <table><tbody><tr><td class="e-text-center">@((context as Product).ProductID)</td><td width="240px">@((context as Product).ProductName)</td><td>@((context as Product).UnitPrice)</td><td>@((context as Product).UnitsInStock)</td><td>@((context as Product).UnitsOnOrder)</td></tr> </tbody></table>
-                        </ItemTemplate>
-                    </ComboBoxTemplates>
-                    <ComboBoxFieldSettings Text="ProductName" Value="ProductID"></ComboBoxFieldSettings>
-                    <ComboBoxEvents TValue="string" TItem="Product" Filtering="OnFiltering"></ComboBoxEvents>
-                </SfComboBox>
-            </div>
-        </div>
-    </div>
-</div>
-
-@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);
-    }
-
+@page "/"
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Data
+@using MultiColumnComboBoxSample.Shared;
+@inject HttpClient Http
+
+<h1>Multi-column ComboBox!</h1>
+
+Welcome to your new app.
+
+<div id="ControlRegion">
+    <div class="control-section col-lg-12">
+        <div id="remote-data" class="col-lg-6">
+            <div class="content">
+                <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>
+                        </HeaderTemplate>
+                        <ItemTemplate>
+                            <table><tbody><tr><td class="e-text-center">@((context as Product).ProductID)</td><td width="240px">@((context as Product).ProductName)</td><td>@((context as Product).UnitPrice)</td><td>@((context as Product).UnitsInStock)</td><td>@((context as Product).UnitsOnOrder)</td></tr> </tbody></table>
+                        </ItemTemplate>
+                    </ComboBoxTemplates>
+                    <ComboBoxFieldSettings Text="ProductName" Value="ProductID"></ComboBoxFieldSettings>
+                    <ComboBoxEvents TValue="string" TItem="Product" Filtering="OnFiltering"></ComboBoxEvents>
+                </SfComboBox>
+            </div>
+        </div>
+    </div>
+</div>
+
+@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);
+    }
+
 }