Format filtered columns header

[Ditchford]

Hello

I have a grid with filters like set like this:

Syncfusion.Blazor.Grids.FilterType.CheckBox

Filtered columns are indicated by the fact that the little filter icon to the right of the column header is colored. In my case to the accent color (red) I set in theme studio. This formatting happens out of the box

The above column is filtered and hence the little icon is red, but this is quite easy to miss. What I would like to do is control the css of the column header text as well so that when the column is filtered the Header Text color changes as well. This would make it very clear to the user that the column is filtered.

Is this possible?

Thank you

[Keerthana Ganesan]

Hi Ditchford,

Welcome from Syncfusion support.

Currently, we are validating your query at our end. Further details will be updated within two business days.

Until then we appreciate your patience.

Regards,

Keerthana.

[Ditchford]

Hello

Any updates on this?

Thanks

[Vignesh Natarajan]

Hi Richard,

Sorry for the delay in getting back to you.

Query: “What I would like to do is control the CSS of the column header text as well so that when the column is filtered the Header Text color changes as well”

We have analyzed your query and we would like to inform you that the requested requirement can be achieved using the JavaScript solution only. We have achieved your requirement by calling a JavaScript function using JSRuntime in the DataBound event of the Grid. Refer to the below code example for your reference

@inject IJSRuntime JsRuntime

 

<SfGrid @ref=Grid DataSource="@Orders" AllowFiltering="true">

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

    <GridEvents DataBound="OnDataBound" 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>

 

@code {

    SfGrid<Order> Grid { get; set; }

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

    public async Task OnDataBound()

    {

 

        JsRuntime.InvokeVoidAsync("ClearFilterHeader");

        if (Grid?.FilterSettings?.Columns?.Count > 0)

        {

            var list = Grid.FilterSettings.Columns.Select(x => x.Uid).ToList();

            JsRuntime.InvokeVoidAsync("FilterHeader", list);

        }

    }

 

[Filter.js]

 

/*to clear the existing header color*/

function ClearFilterHeader() {

    var len = document.querySelectorAll(".e-headertext");

    for (var i = 0; i < len.length; i++) {

        len[i].style.color = "black";

    }  

}

/*to apply color to header text after filtering*/

function FilterHeader(cols) {

    for (var i = 0; i < cols.length; i++) {

        document.querySelectorAll('[e-mappinguid="' + cols[i] + '"]')[0].querySelector(".e-headertext").style.color = "blue";

    }

}

For your convenience, we have attached the sample in the attachments for your reference. Refer to our UG documentation for your reference.

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

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

Attachment: BlazorGrid_db28d7aa.zip

[Ditchford]

Hey

Brilliant...thank you

[Preethi Rajakandham]

Hi Ditchford, 

Most Welcome.

Regards,

Preethi R