Remove focus rectangle

[Mike Chafin]

How do I remove the focus rectangle when the user clicks on a row in the grid?

Thanks,

Mike

[Prathap Senthil]

Hi Mike,

Greetings from Syncfusion,

Query:” How do I remove the focus rectangle when the user clicks on a row in the grid?”

To remove the focus, we remove the border from the selected row cell and column header using CSS style. Here is a code snippet that you can use for your reference:

<style>

 

  .e-grid td.e-rowcell.e-focus.e-focused{

 

    box-shadow:none;

 

  }

 

  .e-grid th.e-headercell.e-focus.e-focused{

         box-shadow:none;

  }

 

</style>

 

Regards,
Prathap S

[Mike Chafin]

That did not work.

https://app.screencast.com/AO7U5kom9Xw5i 

[Prathap Senthil]

Thanks for the Update,

We have tried reproducing the issue in our recent version (20.4.0.50) but were unable to do so. We recommend upgrading to the latest version of our software to see if that resolves the issue. We have included a screenshot and sample for your reference.

In order to assist in troubleshooting the issue, we kindly request that you provide a simple reproducible sample or if possible, try modifying the attached sample to see if the issue can be reproduced there. We appreciate your cooperation and hope to resolve this issue for you as soon as possible.

Attachment: BlazorDataGrid_b329b77d.zip

[Andrew Fraser]

I am also seeing this issue:

As I don't want the focus rectangle on *any* of my grids in my Blazor application, I have added the suggested to my app.css file:

.e-grid td.e-rowcell.e-focus.e-focused {
    box-shadow: none;
}

.e-grid th.e-headercell.e-focus.e-focused {
    box-shadow: none;
}

But as can be seen, I still get a focus box on the grid.

What am I missing?

Andy

[Prathap Senthil]

Hi Andrew,

Based on your query, we would like to clarify that from version 32.1.19, the dynamic addition of e-focus and e-focused classes for focus handling has been removed. Focus states are now managed using native CSS selectors (:focus and :focus-visible) for better performance and a cleaner implementation. To achieve your requirement, we suggest using the code snippet and sample provided below for your reference.

Release notes: Essential Studio for Blazor Release Notes

Code snippet:

 

<style>

    .e-grid .e-gridcontent .e-content td.e-rowcell:focus {

        box-shadow: none !important;

    }

 

    .e-grid .e-gridheader .e-headercontent th.e-headercell:focus {

        box-shadow: none !important;

    }

</style>

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

Regards,
Prathap Senthil