FluentDataGrid display issue when using ColumnOptions for filter

[jadAzar12]

🐛 Bug Report

The issue occurs when clicking the filter button in the table header cell. Instead of opening a small modal or dropdown overlay above the table headers, the filter content is rendered within the same header cell, causing the cell to expand and display a scrollbar. This issue started appearing after upgrading to version 4.11.0, whereas it was working correctly in version 4.10.1

💻 Repro or Code Sample

@layout MainLayout
@Attribute [Authorize(Roles = "SA")]

@Inject NavigationManager NavManager
@Inject JavaScriptService JsService
@Inject IToastService ToastService
@Inject BusinessService _businessService

All Businesses

<!-- Content Section -->
<div class="table-page-content">
    <FluentDivider Style="width: 100%;" Role="DividerRole.Presentation"></FluentDivider>    

    <!-- Table Wrapper -->
    @* <div><FluentSearch></FluentSearch></div> *@
    <div class="table-wrapper">
        <FluentDataGrid @ref="myGrid"
                        ResizableColumns=true
                        
                        HeaderCellAsButtonWithMenu = "false"
                        RowSize="DataGridRowSize.Medium"
                        id="myDiv"
                        GenerateHeader="GenerateHeaderOption.Sticky"
                        ItemsProvider="BusinessListProvider"
                        Pagination="@pagination"
                        TGridItem="BusinessListItem"
                        MultiLine="true"
                        ShowHover = "true">          
                        
                        <ChildContent>
                              @*  <PropertyColumn Property="@(p => p.BusinessId)" Sortable="false" Title="ID" />  *@
            <PropertyColumn Property="@(p => p.BusinessName)" Sortable="true" Title="Business Name" >
                <ColumnOptions>
                    <div class="search-box">
                        <FluentSearch type="search" Autofocus=true Placeholder="Country name..." />
                    </div>
                </ColumnOptions>
            </PropertyColumn>
            <PropertyColumn Property="@(p => p.CountryName)" Sortable="false" Title="Country" />
            <TemplateColumn Sortable="false" Title="Is Active" > 

                <ChildContent>
                @if (@context.IsAcive)
                {
                    <FluentIcon Value="@(new Icons.Regular.Size24.CheckboxChecked())"
                    Color="@Color.Success" />
                }
                else{

                    <FluentIcon Value="@(new Microsoft.FluentUI.AspNetCore.Components.Icons.Color.Size24.DismissCircle())" />
                    
                    }
                </ChildContent>
                <ColumnOptions>
                    <div class="search-box">
                        <FluentSearch type="search" Autofocus=true Placeholder="Country name..." />
                    </div>
                </ColumnOptions>
             
            </TemplateColumn>
               
            <TemplateColumn Title="Actions" >
                <FluentButton aria-label="Edit item" IconEnd="@(new Icons.Regular.Size16.Edit())" OnClick="@(() => Console.WriteLine("Edit clicked"))" />
                <FluentButton aria-label="Delete item" IconEnd="@(new Icons.Regular.Size16.Delete())" OnClick="@(() => Console.WriteLine("Delete clicked"))" />
            </TemplateColumn>
                        </ChildContent>
          
              
            
            <EmptyContent>
                <FluentIcon Value="@(new Icons.Filled.Size24.Crown())" Color="@Color.Accent" />&nbsp; Nothing to see here. Carry on!
            </EmptyContent>
        </FluentDataGrid>
    </div>
</div>

<!-- Footer -->
<div class="table-page-footer">   
    <DataGridPaginatorComponent paginationState="@pagination" ItemsPerPageChanged="@OnItemsPerPageChanged"></DataGridPaginatorComponent>    
  
</div>

@code {

async Task OnItemsPerPageChanged (int value)
{      

    pagination = new PaginationState { ItemsPerPage = value };      

    
}


GridItemsProvider<BusinessListItem> BusinessListProvider = default!;

bool Isloading = false;

PaginationState pagination = new PaginationState { ItemsPerPage = 15 };
FluentDataGrid<BusinessListItem> myGrid;



protected override async Task OnInitializedAsync()
{

    BusinessListProvider = GetGridItemsProviderResult;
    
} 

private async ValueTask<GridItemsProviderResult<BusinessListItem>> GetGridItemsProviderResult(GridItemsProviderRequest<BusinessListItem> req)
{

    try
    {          

        myGrid.Loading = true;       

      
        int pageSize = req.Count ?? 10;
        int pageNumber = (req.StartIndex / pageSize) + 1;
        

        var paginatedRequest = new PaginatedRequest { pageSize = pageSize, pageNumber = pageNumber };
        var response = await _businessService.LoadBusinessesAsync(paginatedRequest);
        
        if (response.Success)
        {
          
            return GridItemsProviderResult.From(
                items: response.Data.data,
                totalItemCount: response.Data.totalRecords);
        }
        else
        {
            ToastService.ShowError(response.Message, 30000);
            return GridItemsProviderResult.From(
                items: new List<BusinessListItem>(),
                totalItemCount: 0);
        }
    }
    catch (Exception ex)
    {
        ToastService.ShowError($"{ErrorCodes.ExceptionError}: Failed to load business.", 30000);
        return GridItemsProviderResult.From(
            items: new List<BusinessListItem>(),
            totalItemCount: 0);
    }
    finally
    {
   
        myGrid.Loading = false;
        StateHasChanged();
    }
}

}

🤔 Expected Behavior

opening a small modal or dropdown overlay above the table headers

😯 Current Behavior

the filter content is displayed within the same header cell, causing the cell to expand and show a scrollbar.

💁 Possible Solution

🔦 Context

🌍 Your Environment

.net 8 blazor web assembly standalone, Fluent ui 4.11.0.https://github.com/user-attachments/assets/436364f1-c0c4-4f8e-ad35-0a6ed5fddd30

[vnbaaij]

A lot of things have changed with the Datagrid rendering in 4.11 (as mentioned in the docs) . Please compare your code with the working examples on the demo site.
Or supply ready to run example code

[jadAzar12]

try this code :

@page "/admin/business"


@layout MainLayout
@* @attribute [Authorize(Roles = "SA")] *@


@inject NavigationManager NavManager
@* @inject JavaScriptService JsService
@inject IToastService ToastService
@inject BusinessService _businessService *@


<div class="table-page-layout">
    <!-- Header -->
    <div class="table-page-header">
        All Businesses
    </div>

    <!-- Content Section -->
    <div class="table-page-content">
        <FluentDivider Style="width: 100%;" Role="DividerRole.Presentation"></FluentDivider>    

        <!-- Table Wrapper -->
        @* <div><FluentSearch></FluentSearch></div> *@
        <div class="table-wrapper">
            <FluentDataGrid @ref="myGrid"
                            ResizableColumns=false
                            
                            HeaderCellAsButtonWithMenu = "false"
                            RowSize="DataGridRowSize.Medium"
                            id="myDiv"
                            GenerateHeader="GenerateHeaderOption.Sticky"
                            ItemsProvider="BusinessListProvider"
                            Pagination="@pagination"
                            TGridItem="BusinessListItem"
                            MultiLine="true"
                            ShowHover = "true">          
                            
                            <ChildContent>
                                  @*  <PropertyColumn Property="@(p => p.BusinessId)" Sortable="false" Title="ID" />  *@
                    <PropertyColumn Property="@(p => p.BusinessName)" Sortable="true" Title="Business Name" Filtered="@(!string.IsNullOrWhiteSpace(BusinesseNameFilter))">
              
                    <ColumnOptions>
                        <div class="search-box">
                                <FluentSearch
                                    type="search"
                                    Autofocus=true
                                    Placeholder="Search Business" 
                                    @bind-Value="@BusinesseNameFilter"
                                    @bind-Value:after="@OnSearch"
                                    ImmediateDelay = "500"
                                    Immediate="true" />
                        </div>
                    </ColumnOptions>
                </PropertyColumn>
                    <PropertyColumn Property="@(p => p.CountryName)" Sortable="false" Title="Country" Filtered="@(!string.IsNullOrWhiteSpace(CountryNameFilter))">
                        <ColumnOptions>
                            <div class="search-box">
                                <FluentSearch type="search"
                                              Autofocus=true
                                              Placeholder="Search Country"
                                              @bind-Value="@CountryNameFilter"
                                              @bind-Value:after="@OnSearch"
                                              ImmediateDelay="500"
                                              Immediate="true" />
                            </div>
                        </ColumnOptions>

                </PropertyColumn>
                <TemplateColumn Sortable="false" Title="Is Active" Filtered="@(!string.IsNullOrEmpty(IsActiveFilter))"> 

                    <ChildContent>
                    @if (@context.IsAcive)
                    {
                        <FluentIcon Value="@(new Icons.Regular.Size24.CheckboxChecked())"
                        Color="@Color.Success" />
                    }
                    else{

                        <FluentIcon Value="@(new Microsoft.FluentUI.AspNetCore.Components.Icons.Color.Size24.DismissCircle())" />
                        
                        }
                    </ChildContent>
                    <ColumnOptions>
                        <div class="search-box">
                          
                                    <FluentRadioGroup Name="numbers" TValue="string" @bind-Value="@IsActiveFilter" Label="Numbers">
                                        <FluentRadio Value=@("true")>Active</FluentRadio>
                                        <FluentRadio Value=@("false")>InActive</FluentRadio>
                                        <FluentRadio Value=@("none")>None</FluentRadio>

                                    </FluentRadioGroup>
                                
                               
                                
                        </div>
                    </ColumnOptions>
                 
                </TemplateColumn>
                   
                <TemplateColumn Title="Actions" >
                    <FluentButton aria-label="Edit item" IconEnd="@(new Icons.Regular.Size16.Edit())" OnClick="@(() => Console.WriteLine("Edit clicked"))" />
                    <FluentButton aria-label="Delete item" IconEnd="@(new Icons.Regular.Size16.Delete())" OnClick="@(() => Console.WriteLine("Delete clicked"))" />
                </TemplateColumn>
                            </ChildContent>
              
                  
                
                <EmptyContent>
                    <FluentIcon Value="@(new Icons.Filled.Size24.Crown())" Color="@Color.Accent" />&nbsp; Nothing to see here. Carry on!
                </EmptyContent>
            </FluentDataGrid>
        </div>
    </div>

    <!-- Footer -->
    <div class="table-page-footer">   
       @*  <DataGridPaginatorComponent paginationState="@pagination" ItemsPerPageChanged="@OnItemsPerPageChanged"></DataGridPaginatorComponent>     *@
       <FluentPaginator State="@pagination"></FluentPaginator>
      
    </div>
</div>





@code {

    private string? IsActiveFilter { get; set; } = "none";
    private string BusinesseNameFilter { get; set; } = string.Empty;
    private string CountryNameFilter { get; set; } = string.Empty;

    List<BusinessListItem> dummyBusinessList = new List<BusinessListItem>
{
    new BusinessListItem
    {
        BusinessId = 1,
        BusinessName = "Tech Solutions",
        CountryName = "United States",
        IsAcive = true
    },
    new BusinessListItem
    {
        BusinessId = 2,
        BusinessName = "Green Fields Ltd",
        CountryName = "United Kingdom",
        IsAcive = false
    },
    new BusinessListItem
    {
        BusinessId = 3,
        BusinessName = "Oceanic Ventures",
        CountryName = "Australia",
        IsAcive = true
    },
    new BusinessListItem
    {
        BusinessId = 4,
        BusinessName = "Skyline Enterprises",
        CountryName = "Canada",
        IsAcive = false
    },
    new BusinessListItem
    {
        BusinessId = 5,
        BusinessName = "Desert Sands Corp",
        CountryName = "United Arab Emirates",
        IsAcive = true
    }
};



    void  OnItemsPerPageChanged (int value)
    {     

        pagination = new PaginationState { ItemsPerPage = value };      

    }

    private async Task OnSearch()
    {
        if (!string.IsNullOrWhiteSpace(BusinesseNameFilter))
        {
            Console.WriteLine(BusinesseNameFilter);
        }
        else
        {
            Console.WriteLine("no business filter");
        }
        if (!string.IsNullOrWhiteSpace(CountryNameFilter))
        {
            Console.WriteLine(CountryNameFilter);
        }
        else
        {
            Console.WriteLine("no CountryName filter");
        }
    }


    GridItemsProvider<BusinessListItem> BusinessListProvider = default!;

    bool Isloading = false;

    PaginationState pagination = new PaginationState { ItemsPerPage = 15 };
    FluentDataGrid<BusinessListItem> myGrid;



    protected override async Task OnInitializedAsync()
    {

        BusinessListProvider = GetGridItemsProviderResult;

    } 

    private async ValueTask<GridItemsProviderResult<BusinessListItem>> GetGridItemsProviderResult(GridItemsProviderRequest<BusinessListItem> req)
    {

        try
        {          

            myGrid.Loading = true;       


            int pageSize = req.Count ?? 10;
            int pageNumber = (req.StartIndex / pageSize) + 1;

            var response = dummyBusinessList.Skip(req.StartIndex).Take(pageSize).ToList();
            return GridItemsProviderResult.From(
                    items: response,
                    totalItemCount: response.Count());
            // var paginatedRequest = new PaginatedRequest { pageSize = pageSize, pageNumber = pageNumber };
            // var response = await _businessService.LoadBusinessesAsync(paginatedRequest);
            
            // if (response.Success)
            // {
              
            //     return GridItemsProviderResult.From(
            //         items: response.Data.data,
            //         totalItemCount: response.Data.totalRecords);
            // }
            // else
            // {
            //     ToastService.ShowError(response.Message, 30000);
            //     return GridItemsProviderResult.From(
            //         items: new List<BusinessListItem>(),
            //         totalItemCount: 0);
            // }
        }
        catch (Exception ex)
        {
            //ToastService.ShowError($"{ErrorCodes.ExceptionError}: Failed to load business.", 30000);
            return GridItemsProviderResult.From(
                items: new List<BusinessListItem>(),
                totalItemCount: 0);
        }
        finally
        {
       
            myGrid.Loading = false;
            StateHasChanged();
        }
    }
}

[vnbaaij]

The code was not runnable. BusinessListItem was missing. Fortunately, GH Copilot was smart enough to proviude an implementation for it.

The specific combination of header/not sortable/not resizable/multiline was not yet covered in the styling rules. We've added this for the next release: