Howto: Grid alternate rows with css file

<style type="text/css" class="cssStyles">

    .e-grid .e-altrow {

        background-color: #f2f2f2;

    }

</style>

<SfGrid @ref="_imageTable" DataSource="_allImages" AllowSorting="true" AllowFiltering="true" EnableAltRow="true">

..

</SfGrid>



That code works but as soon as I move the <style> tag into a css file instead like below, it stops working?

.e-grid .e-altrow {

  background-color: #f2f2f2; }


3 Replies 1 reply marked as answer

JP Jeevakanth Palaniappan Syncfusion Team July 15, 2021 07:06 AM UTC

Hi  
 
Greetings from Syncfusion support. 
 
We have checked your query and we have prepared a sample based on your requirement. Please refer the below code snippet and the sample for your reference. 
 
Refer the created css file in the Host.cshtml like below. 
Host.cshtml 
<head> 
.. 
    <link rel='nofollow' href="~/StyleSheet.css" rel="stylesheet" /> 
</head> 
 
StyleSheet.css 
.e-grid .e-altrow { 
    background-color: #f2f2f2; 
} 
 
 
 
Regards, 
Jeevakanth SP. 



EL Elephant July 17, 2021 08:37 AM UTC

I'm sorry I should have been more clear. Yes, it works if you put it inside a global css file but I want to use it inside the isolated css file. In your example, if I move that specific css-code out of "StyleSheet.css" and into "Index.razor.css" then it also stops working in your example.



JP Jeevakanth Palaniappan Syncfusion Team July 19, 2021 10:47 AM UTC

Hi Carlo, 

We have checked your query and to use the CSS isolation for the grid, we suggest you to wrap the SfGrid inside a HTML div element and then use the ::deep combinator as like below. 

Index.razor 
<div> 
    <SfGrid @ref="Grid" ID="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 
        .. 
    </SfGrid> 
</div> 

Index.razor.css 
::deep .e-grid .e-altrow { 
    background-color: #f2f2f2; 
} 


Please refer the below Microsoft link for more information 

Regards, 
Jeevakanth SP. 


Marked as answer
Loader.
Up arrow icon