How to search data column when columns are grouped in datagrid.

Hello support team, I am using the group function of datagrid and filter. The problem I'm having is that when I group a column it hides the search bar. How can I show the search bar again?

Below is my code.
Link: https://blazorplayground.syncfusion.com/embed/hDrytWMKhJPXTOZg?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

<GridFilterSettings Type="FilterType.FilterBar" Mode="FilterBarMode.OnEnter"></GridFilterSettings>

<GridGroupSettings Columns="@Initial" />

I have another question: how to assign FilterSettings="@(new FilterSettings{ Operator = Operator.Contains })"

For all columns without having to assign them manually. Thank you!!!

image_5.png


3 Replies

SK Sanjay Kumar Suresh Syncfusion Team January 14, 2025 11:49 AM UTC

Hi Chang,


Query 1:  When I group a column it hides the search bar.


Upon reviewing your query, it appears that you would like the filter bar of a column to remain visible even when the corresponding column is grouped. By default, when a column is grouped in the DataGrid, it gets hidden from the UI.


To address this, you can use the ShowGroupedColumn property under GridGroupSettings. Setting this property to true ensures that the grouped column remains visible in the UI, meeting your requirement.


Code Snippet:


<GridGroupSettings Columns="@Initial" ShowGroupedColumn="true"></GridGroupSettings>

 


Query 2: How to assign FilterSettings="@(new FilterSettings{ Operator = Operator.Contains })" for all columns


To set a particular filter settings for all the columns in the Grid, we recommend you to proceed as like below suggestion.


Code Snippet:


<SfGrid DataSource="@Orders" @ref="Grid" AllowFiltering  AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315">

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>

    <GridEvents OnLoad="LoadHandler"  TValue="Order"></GridEvents>

    </SfGrid>

 

@code {

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

 

    SfGrid<Order> Grid { get; set; }

   

 

    public void LoadHandler(object args)

    {

        foreach (var column in Grid.Columns)

        {

            if (column.Type == ColumnType.String)

            {

                column.FilterSettings = new FilterSettings

                {

                        Operator = Syncfusion.Blazor.Operator.Contains

                };

            }

        }

    }

}

 


We have also attached a sample below for your reference. Please take a look, and let us know if you have any questions or need further assistance.


Sample: https://blazorplayground.syncfusion.com/embed/hDLIjsCThxmOhtss?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5


Regards,

Sanjay Kumar Suresh



CN Chang Nguyen Phuong January 15, 2025 03:56 AM UTC

Thanks, it work for me 🎉🎉. You are the best  Sanjay Kumar Suresh!!!.



SK Sanjay Kumar Suresh Syncfusion Team January 15, 2025 06:23 AM UTC

Hi Chang,


We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.


Regards,

Sanjay Kumar Suresh


Loader.
Up arrow icon