We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Filter menu not working

Hello !

       I am using the trial version of syncfusion blazor components, when I try using filter menu option given in the grid the menu is not opening as expected. I used exact same code given for demo, can someone try help me

@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true" Height="315">
  <GridFilterSettings Type ="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = (new DateTime[] { new DateTime(2010, 5, 1), new DateTime(2010, 5, 2), new DateTime(2010, 5, 3), })[new Random().Next(3)],

    public class Order {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }

1 Reply

SP Sarveswaran Palani Syncfusion Team March 20, 2023 03:19 AM UTC

Hi Manirathinam,

Greetings from Syncfusion support.

From your query, we created sample based on your requirement in latest NuGet version. But we’re unable to reproduce a reported issue at our end. Kindly refer the attached sample and suggest you include script and themes properly in your project. This is the main cause of an issue you are facing. Kindly refer the attached code snippet and UG documentation for your reference.


    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base rel='nofollow' href="~/" />

    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />

    <link rel='nofollow' href="css/site.css" rel="stylesheet" />

    <link rel='nofollow' href="BlazorGrid0212.styles.css" rel="stylesheet" />

    <link rel='nofollow' href=https://cdn.syncfusion.com/blazor/20.4.54/styles/bootstrap5.css rel="stylesheet" />

    <script src=https://cdn.syncfusion.com/blazor/20.4.54/syncfusion-blazor.min.js type="text/javascript"></script>

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />


If you are referencing themes or scripts from CDN, Can you please ensure to change the version of reference.



Kindly get back to us if you are facing further issue again


Sarveswaran PK

Attachment: SfGridFiltering_62309987.zip

Live Chat Icon For mobile
Up arrow icon