Problems with filtering in the data grid.

[José Luis Casado]

Dear Sirs:

We have several issues with filtering in the data grid:

1.- We would like to have the row filtering appearing on the data grid and at the same time be aglo for each column to change the type of filter (Contains, starts with, etc). How can we do that?
2.- If the row filtering does not appear in the data grid, you filter and there is no way to know which columns have been applied the filter. Is there any way that the column header of those columns in which a filter has been applied have a different color or any type of indication?

Regards!!!

[Vignesh Natarajan]

Hi José, 

 

Thanks for contacting Syncfusion support.  

 

Query: “We would like to have the row filtering appearing on the data grid and at the same time be aglo for each column to change the type of filter (Contains, starts with, etc). How can we do that?” 

 

We have analyzed the reported query and by default when AllowFiltering is enabled in Grid, FilterType will be of FilterBar (i.e.) filter row will be displayed in Grid below the Grid header. When Filtering is applied to specific column, filtered value will be displayed at bottom of Grid when it if of FilterBar mode. Filter Operator of particular column can be change using FilterSettings property of GridColumn.  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/filtering/#filter-bar  

https://blazor.syncfusion.com/documentation/datagrid/filtering/#change-default-filter-operator  

 

Query: “Is there any way that the column header of those columns in which a filter has been applied have a different color or any type of indication?” 

 

For all other FilterType than FilterBar, Filter icon will be displayed in column header to open a respective dialog. This icon color will be changed when filtering is applied to that column. Refer our below online sample for your reference 

 

Demo : https://blazor.syncfusion.com/demos/datagrid/excel-like-filter?theme=material  

 

Note: kindly ensure by filtering any column. Filter icon color will be changed indicating that column is filtered.   

 

Please get back to us if you have further queries.  

  

Regards,
Vignesh Natarajan 

[Marco Andrade]

Hi, I'm running into the same issue so to speak with the styling of the filtered columns. The 3 dots on the column header just do not stick enough to let the user know that column has been filtered, and aside from the class on the filter icon, there's no class on the cells of the filtered column to change on our end. Are there plans to at least add classes to the cells in filtered and sorted columns to allow folks to style as needed?

[Vignesh Natarajan]

Hi Marco,  

 

Thanks for contacting Syncfusion support.  

 

Query: “so to speak with the styling of the filtered columns. The 3 dots on the column header just do not stick enough to let the user know that column has been filtered” 

 

We have analyzed your query and we suspect that you are facing trouble with column menu (icons) feature (referring to 3 dots in column header) when filtering is applied to that particular column. We would like to inform you that color of the column menu (3 dots) will change when filtering is applied to it. Based on the color change, we can identify that filtering is applied to it.  

 

Refer the below screenshot for you reference 

 

1. When filtering is not applied to it.

 

 

2. When filtering is applied to Customer Name column

 

 

We have ensured the reported issue using material theme file and color of the column menu will be changed when filtering is applied to it. Kindly download the sample which we have prepared using Column menu and Menu filter.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/159661/ze/DataGrid2092675130  

 

After referring the sample, if you are still having queries. Kindly get back to us with following details.  

 

1. Share the Grid rendering code example.
2. Share screenshot of the issue you are facing.
3. Share the details about the theme you are using for DataGrid component.
4. If possible try to reproduce the reported issue in provided sample and revert back to us.

 

Above requested details will be helpful for us to understand the nature of issue and provide the solution as early as possible.  

 

Regards, 

Vignesh Natarajan  

[Marco Andrade]

Hi Vignesh, my question was more geared towards the table cells, having some CSS class on the cells in each column that has a filter on it. What's happening with us is we have several columns in a grid and those three dots are just not enough to really highlight the filtered column. We'd like to have control of all cells in that column, change the background, border, anything, but with no CSS class on them we cannot do anything. Many thanks, Marco!

[Vignesh Natarajan]

Hi Marco,  

Thanks for the update.  

Query: “those three dots are just not enough to really highlight the filtered column. We'd like to have control of all cells in that column, change the background, border, anything,. 

We have analyzed your query and we understand that you want to customize the filter columns cells. We suggest you to achieve your requirement using QueryCellInfo event of the Grid. QueryCellInfo event will be triggered when cell is generated. In the event argument we can find the details regarding the cell, column etc. In this event we suggest you to add specific class to column when that column is filtered. Filtered column details can be found in FIlterSettings. Using the AddClass method of cell we suggest you add the class name.  

Refer the below code example.  

<SfGrid @ref="Grid" DataSource="@Orders" AllowSorting="true" ShowColumnMenu="true" AllowFiltering="true" AllowPaging="true" Height="315"> 

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings> 

    <GridEvents QueryCellInfo="CellInfoHandler" TValue="Order"></GridEvents> 

    <GridColumns> 

        <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> 

    </GridColumns> 

</SfGrid> 

 

<style> 

    .filtered{ 

        background-color: lightcoral; 

    } 

</style> 

 

@code{ 

    SfGrid<Order> Grid { get; set; } 

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

    public void CellInfoHandler(QueryCellInfoEventArgs<Order> Args) 

    { 

        var FilterCols = Grid.FilterSettings?.Columns; // will provide filtered column details.  

        if (FilterCols?.Count > 0) // when column is filtered 

        { 

            for(var i = 0; i < FilterCols.Count;i++) // loop the for multiple filtered column 

            { 

                if(Args.Column.Field == FilterCols[i].Field) // check with current column  

                { 

                    Args.Cell.AddClass(new string[] { "filtered" }); // add specific class name to content 

                } 

            } 

        } 

    } 

 

When a column is filtered, background color of that column is changed to coral color. For your convenience we have prepared a sample using above solution.  

Sample: https://www.syncfusion.com/downloads/support/forum/159661/ze/DataGrid779353893  

Refer our UG documentation for your reference 

https://blazor.syncfusion.com/documentation/datagrid/events/#querycellinfo  

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan