Blazor WebAssembly: Unable to override e-hover class of DataGrid

[Hacinto]

Using 18.4.0.33.

Per the DataGrid styling documentation, you can override the row hover behavior by overriding the e-hover class.

The following css won't override it:

<style>

    .e-grid .e-hover {

        cursor: pointer;

        font-size: 1.1rem;

    }

</style>

Pausing js script execution in the browser on hover to inspect the element or forcing the :hover state is not adding the e-hover class to the row.

What's the proper way of overriding e-hover?

Thanks for your support.

[Vignesh Natarajan]

Hi Hacinto, 

 

Thanks for contacting Syncfusion support.  

 

Query: “Pausing js script execution in the browser on hover to inspect the element or forcing the :hover state is not adding the e-hover class to the row. What's the proper way of overriding e-hover?”  

 

We have analyzed your query and we suggest you to achieve your requirement using :hover css property instead of .e-hover. Refer the below code example to customize the grid content on hovering.  

 

<SfGrid DataSource="@Orders" AllowPaging="true"> 

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

    .e-grid .e-row:hover { 

        cursor: pointer 

    } 

  

        .e-grid .e-row:hover .e-rowcell { 

            font-size: 1.1rem; 

        } 

</style> 

 

  

For your convenience we have prepared a sample using above solution which can be downloaded from below  

Sample: https://www.syncfusion.com/downloads/support/forum/161186/ze/BlazorApp1-1077373109  

 

Note: .e-hover class will not be included to tr element when record is hovered. We have logged documentation task to update our documentation and it will be refreshed online as soon as possible.  

 

We suggest you to achieve your requirement using above solution. Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan   

[Hacinto]

That works. Thanks for the quick response!

[Vignesh Natarajan]

Hi Hacinto,  

Thanks for the update. 

We are glad to hear that you have achieved your requirement using our solution.  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan