I am using Blazor Web App .NET 8 with the latest MudBlazor service. After setting the Filterable = true, the filter icon is appearing on my table, but when click, nothing is showing up. I am following the example on the MudBlazor website. Am I missing something?
I have followed the steps on installing the MudBlazor service to my project. I even tested it with and without Bootstraps stylesheet to see if there is conflicts. And I used the default weather table from Blazor Web App and change to use MudDataGrid. Maybe I am not adding the function for handling the filter after onclick. But based on the example I see in MudBlazor Documentation, they just set the Filterable = "true" and the filter just work.
_Imports.razor
@using System.Net.Http@using System.Net.Http.Json@using Microsoft.AspNetCore.Components.Forms@using Microsoft.AspNetCore.Components.Routing@using Microsoft.AspNetCore.Components.Web@using static Microsoft.AspNetCore.Components.Web.RenderMode@using Microsoft.AspNetCore.Components.Web.Virtualization@using Microsoft.JSInterop@using MudBlazorTest@using MudBlazorTest.Components@using MudBlazorApp.razor
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><base href="/" /><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /><link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /><link rel="stylesheet" href="app.css" /><link rel="stylesheet" href="MudBlazorTest.styles.css" /><link rel="icon" type="image/png" href="favicon.png" /><HeadOutlet /></head><body><Routes /><script src="_framework/blazor.web.js"></script><script src="_content/MudBlazor/MudBlazor.min.js"></script></body></html>Program.cs
using MudBlazorTest.Components;using MudBlazor.Services;var builder = WebApplication.CreateBuilder(args);// Add services to the container.builder.Services.AddMudServices();builder.Services.AddRazorComponents() .AddInteractiveServerComponents();var app = builder.Build();// Configure the HTTP request pipeline.if (!app.Environment.IsDevelopment()){ app.UseExceptionHandler("/Error", createScopeForErrors: true); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts();}app.UseHttpsRedirection();app.UseStaticFiles();app.UseAntiforgery();app.MapRazorComponents<App>() .AddInteractiveServerRenderMode();app.Run();MainLayout.razor
@inherits LayoutComponentBase<MudThemeProvider /><MudDialogProvider /><MudSnackbarProvider /><div class="page"><div class="sidebar"><NavMenu /></div><main><div class="top-row px-4"><a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a></div><article class="content px-4"> @Body</article></main></div><div id="blazor-error-ui"> An unhandled error has occurred.<a href="" class="reload">Reload</a><a class="dismiss">🗙</a></div>Weather.razor
@page "/weather"@attribute [StreamRendering]@rendermode InteractiveServer@using MudBlazor<PageTitle>Weather</PageTitle><h1>Weather</h1><p>This component demonstrates showing data.</p>@if (forecasts == null){<p><em>Loading...</em></p>}else{<MudDataGrid Items="@forecasts.Take(Range.All)" Class="custom-bordered" RowClass="custom-hover" Filterable="true" FilterMode="@FilterMode"><Columns><PropertyColumn Property="x => x.Date" Title="Date"></PropertyColumn><PropertyColumn Property="x => x.TemperatureC" /><PropertyColumn Property="x => x.TemperatureF" /><PropertyColumn Property="x => x.Summary" Title="Summary"></PropertyColumn> </Columns></MudDataGrid>}@code { private WeatherForecast[]? forecasts; DataGridFilterMode FilterMode = DataGridFilterMode.ColumnFilterMenu; protected override async Task OnInitializedAsync() { // Simulate asynchronous loading to demonstrate streaming rendering await Task.Delay(500); var startDate = DateOnly.FromDateTime(DateTime.Now); var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" }; forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast { Date = startDate.AddDays(index), TemperatureC = Random.Shared.Next(-20, 55), Summary = summaries[Random.Shared.Next(summaries.Length)] }).ToArray(); } private class WeatherForecast { public DateOnly Date { get; set; } public int TemperatureC { get; set; } public string? Summary { get; set; } public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); }}