Filter DataGrid in High Contrst Mode

[Sarah]

Hello

In the DataGrid component, when the system's High Contrast Mode is active, the filter icon is not clearly visible. While this problem did not exist in older versions.

[Prathap Senthil]

Hi Sarah,

Greetings from Syncfusion,

Based on your query, we would like to clarify that we have different inbuilt theme support for the grid. Therefore, we suggest using the high contrast theme reference for styling. Kindly refer to the code snippet and user guide below for your reference.

    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/highcontrast.css" rel="stylesheet" />

Reference:
https://blazor.syncfusion.com/documentation/appearance/themes
https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app

Regards,

Prathap S

[Sarah]

Hello

Thank you for your answer. I don't know what the user's Windows theme is. That's why I can't change the default theme. In the past, with the bootstrap5.css theme that I had used in windows high contrast mode, the filter icon was displayed correctly, and unfortunately there is a problem in the new versions. has done.

[Prathap Senthil]

Before proceeding with the reporting of the concern , we require some additional clarification from your end. Please share the following details to proceed further on our end:

           1.Could you please provide more details about the versions of Syncfusion Blazor and bootstrap5.css you were using when the filter icon displayed correctly?

           2.Can you specify the settings or configurations for Windows high contrast mode when the filter icon was displayed correctly with the previous versions?

           3.Could you elaborate on the specific issue or problem encountered with the filter icon in the new versions of Syncfusion Blazor when using bootstrap5.css in Windows high contrast mode?

The details requested above will be very helpful in validating the reported query on our end and providing a solution as soon as possible. Thanks for your understanding.

[Sarah]

Hello and thank you for your follow up

I used Windows 10 and Bootstrap theme. Unfortunately, I do not know the answers to the rest of the questions.

There are several cases.

How can I implement the following image?

 1- Currently, in High Contrast mode, the border color of the filter is black. How can I change the border color?

2- Due to the fact that the image is displayed correctly in High Contrast. Is it possible to put a custom image instead of the filter icon (two images. One image for when the filter is not done and the second image for the state where the filter is applied)?

[Prathap Senthil]

Based on the query, we would like to convey that when changing to a system high contrast mode, CSS colors appear to be removed because in high contrast mode, the system overrides the default color settings specified in CSS (Cascading Style Sheets). And we cannot change the color of the standard HTML Element to make it visible, such as changing the filter border color of the icon, is not included when the system is in high contrast mode. Thanks for your understanding.

[Sarah]

Hi Prathap Senthil, 

Thank you for your reply.

Is it possible to answer the second question?

2- Due to the fact that the image is displayed correctly in High Contrast. Is it possible to put a custom image instead of the filter icon (two images. One image for when the filter is not done and the second image for the state where the filter is applied)?

[Prathap Senthil]

Based on your need we recommend utilizing the 'after filter' feature to swap out the filtered icon. This will allow you to seamlessly transition between the default filter icon and the filtered icon. Please refer to the code snippet and sample below for implementation details

<style>

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

        content: "\e796" ;

    }

 

 

</style>

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

[Sarah]

Hi Prathap Senthil, 

Thank you for your answer

As I mentioned before, is it not possible to use an image (.png)?

[Prathap Senthil]

Based on your requirements, it is possible to change the filtered or unfiltered image. We suggest using the CSS customization below to achieve your desired results. Please refer to the code snippet and sample provided for reference.

<style>

 

/*     filter not applied */

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

        content: "";

        display: inline-block;

        width: 16px;

        height: 16px;

        background-image: url('favicon.png'); /* Path to your image */

        background-size: cover;

    }

 

   /*  filter applied */

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

        content: "";

        display: inline-block;

        width: 16px;

        height: 16px;

        background-image: url('favicon.png'); /* Path to your image */

        background-size: cover;

   

    }

 

</style>

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

[Sarah]

Hi Prathap Senthil, 

Thank you very much.

There is another small problem. I used the two images that I attached and it works correctly when the mode is not high contrast. But in the high contrast mode, the image is not displayed correctly when filtering is activated.

Attachment: img_e3fdbbf5.rar

[Prathap Senthil]

We are unable to reproduce the reported issue when attempting to reproduce the issue. For your reference we have attached screen shot and simple sample .So, to
further proceed with the reporting problem, we require some additional clarification from your end. Please share the below details to proceed further at our end.

• To analyze the reported issue, could you please share a simple and reproducible sample that demonstrates the problem? This will assist us in identifying the issue more efficiently and providing a resolution.
• Could you please share us the which Contrast theme type using at your end ?
• If possible, kindly share your attempt to replicate the issue using the attached simple sample.

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

Attachment: BlazorServerApp_5f79bb07.zip