Icon Filter

[Fernando]

Hello,

I configured this custom icon for the filter. But when the column is filtered, this icon does not disappear.

Before filtered:

After filtered: (the two icons appear superimposed)

What do I need to do to make the filter icon disappear, and make a new icon appear with the filtered column?

Thanks

<style>
 .e-grid .e-icon-filter::before {
            content: '';
            display: inline-block;
            width: 16px; /* Largura desejada */
            height: 16px; /* Altura desejada */
            background: url('https://www.site.com.br/filter.svg') no-repeat center center;
            background-size: cover;
        }
</style>

[Fernando]

Hello,

Could you help me in this case?

Thanks

[Hemanthkumar S]

Hi Fernando,

Greetings from Syncfusion support.

Query: What do I need to do to make the filter icon disappear, and make a new icon appear with the filtered column?

Based on your provided information, it seems you want to retain the filter icon even after filtering a column in the Grid. The Grid provides the ability to customize its appearance by allowing you to override its default CSS. To meet your requirements, we recommend applying the style with high priority using a unique identifier (id). This approach will ensure that the filter icon remains as desired even after filtering the column.

For more information, please refer to the code example and documentation.

 

<style>

    #Grid.e-grid .e-icon-filter::before {

        content: '';

        display: inline-block;

        width: 16px;

        height: 16px;

        background: url('https://www.site.com.br/filter.svg') no-repeat center center;

        background-size: cover;

    }

</style>

 

<ejs-grid id="Grid" dataSource="ViewBag.datasource" childGrid="ChildGrid" allowfiltering="true">

Style and Appearance: https://ej2.syncfusion.com/aspnetcore/documentation/grid/style-and-appearance/style-and-appearance

Please feel free to contact us if you require any further assistance. We are always available and eager to help you in any way we can.

Regards,

Hemanth Kumar S

[Fernando]

Hello,

In this example, the "Unidade" column is not filtered and the icon is perfect. But the column "Sigla" is filtered and two icons appear. I would like the standard icon with three lines to disappear when filtering a column and only another icon to appear to inform that the column is filtered.

Thanks

[Hemanthkumar S]

Hi Fernando,

Before we proceed with providing a solution, we need some information to better understand your query. Please provide us with the following details:

1. Do you wish to display your custom icon before filtering, and after filtering, do you want to revert to the default icon of the Syncfusion EJ2 Grid?
2. Providing a screenshot demonstration of your expected scenario would greatly assist us in understanding your query.

We appreciate your cooperation in providing us with the requested information, as it will help us provide a more effective solution to your query.

Regards,

Hemanth Kumar S

[Fernando]

Hi Hemanth,

I want a custom icon before filtering and another custom icon after filtering.

Before filtering, this icon. This is already working

 .e-grid .e-icon-filter::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            background: url('https://www.site.com.br/filter.svg') no-repeat center center;
            background-size: cover;
        }

After filtering i want this icon

Thanks

[Hemanthkumar S]

Hi Fernando,

Query: I want a custom icon before filtering and another custom icon after filtering.

Based on your information, it seems you want to display two different icons: one before filtering the column and another after filtering the column.

We suggest using the following CSS code to display the icon before filtering the column.

 

    #Grid.e-grid .e-icon-filter::before {

        content: '';

        display: inline-block;

        width: 16px;

        height: 16px;

        background: url('https://www.site.com.br/filter.svg') no-repeat center center; // place your before filtering column icon url here

        background-size: cover;

    }

 

We suggest using the following CSS code to display the icon after filtering the column.

 

    #Grid.e-grid .e-icon-filter.e-filtered::before {

        content: '';

        display: inline-block;

        width: 16px;

        height: 16px;

        background: url('https://www.site.com.br/filter2.svg') no-repeat center center; // place your after filtering column icon url here

        background-size: cover;

    }

 

Please feel free to contact us if you require any further assistance. We are always available and eager to help you in any way we can.

Regards,

Hemanth Kumar S

[Fernando]

Hi Hemanth ,

worked perfectly. 

Thank you very much

[Hemanthkumar S]

Hi Fernando,

Thank you for your message. We are pleased to hear that you found our suggested approach helpful. We will mark this forum as solved.