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; }
SIGN IN To post a reply.
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.
UN
Unknown
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
SIGN IN To post a reply.
- 3 Replies
- 2 Participants
- Marked answer
-
UN Unknown
- Jul 14, 2021 11:44 AM UTC
- Jul 19, 2021 10:47 AM UTC
