-1

I am trying to change the line height of the Radzen Data Grid for the entire solution and not having any luck. I have found that I can do this if I add this style section directly to the .razor file, just under the using, rendermode, and inject statements.

<style>
    .rz-grid-table td, .rz-grid-table th {
        padding: 0.2rem;
    }
</style>

Oddly, creating a [page].razor.css and adding the style to that file does NOT work. It only works if I place the style tag directly into the .razor file.

I have tried adding the style to the app.css, but that is not working either. Here are the non-working settings in app.css:

/* Radzen Data Grid Settings */
.rz-grid-table-striped tbody tr:not(.rz-expanded-row-content):nth-child(odd) > td {
    background-color: lightskyblue
}

.rz-grid-table td, .rz-grid-table th {
    padding: 0.2rem;
}

.ui-datatable tr td, .ui-datatable tr th {
    padding: 0.2rem;
}

Here is my app.razor file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="integritystring" crossorigin="anonymous">
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="blahsite.styles.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="integritystring" crossorigin="anonymous"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body>

</html>

Can someone please tell me what I'm doing wrong? Why can I only change the style by placing a style tag directly in the .razor file?

Improve this question
2
  • i'm afraid the style is covered. I'm testing.
    – Tiny Wang
    Commented Jul 9 at 3:43
  • I shared my test result based on css isolation, which getting help from this case forum.radzen.com/t/…
    – Tiny Wang
    Commented Jul 9 at 5:24

1 Answer 1

Reset to default
-1

I test in my side and put the style into app.css, I found it doesn't take effect, which isn't unloading, but being covered.

enter image description here

So that I added !important to the style which make it take effect.

enter image description here

==========================================

I reproduced the issue in my side too, just like you see, I have the style defined in app.css but it doesn't be applied to the html element, the same for CSS isolation. I searched on the css applied to the element, I can't find it, so that I'm afraid it doesn't take effect, and maybe even not loaded.

enter image description here

Then I tried to find a workaround or solution, I found this link which asked us to treat the <RadzenDataGrid> as the child component, and add ::deep before the style definition. But it didn't work me until I fount this sesction

However, excluding the div element removes the descendant relationship. In the following example, the style is not applied to the child component.

It points me to add a <div> to surround the <RadzenDataGrid> which makeing the css be applied.

Here's my code.

@page "/grid"

@* <style>
    .rz-grid-table td, .rz-grid-table th {
        padding: 0.2rem;
    }
</style> *@

<h3>Grid</h3>
<div>
<RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" GridLines="@GridLines"
                FilterMode="FilterMode.Advanced" PageSize="10" AllowPaging="true" AllowSorting="true" Data="@Categories" TItem="CategoryModel" ColumnWidth="300px"
                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                LogicalFilterOperator="LogicalFilterOperator.Or" FilterPopupRenderMode="PopupRenderMode.OnDemand">
    <Columns>
        <RadzenDataGridColumn TItem="CategoryModel" Property="Id" Title="ID" Frozen="true" Width="200" />

        <RadzenDataGridColumn TItem="CategoryModel" Property="Name" Title="Category Name" Frozen="true" Width="200" />

        <RadzenDataGridColumn TItem="CategoryModel" Property="Description" Title="Category Description" Frozen="true" Width="200" />
    </Columns>
</RadzenDataGrid>
</div>

@code {
    DataGridGridLines GridLines = DataGridGridLines.Both;
    private List<CategoryModel> Categories;

    protected override async Task OnInitializedAsync()
    {
        Categories = new List<CategoryModel>
        {
            new CategoryModel{ Id = "1", Name ="Cate 1", Description = "Desc1"},
            new CategoryModel{ Id = "2", Name ="Cate 2", Description = "Desc2"},
            new CategoryModel{ Id = "3", Name ="Cate 3", Description = "Desc3"}
        };
    }

    public class CategoryModel
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
    
    }
}

And I create css isolation in Grid.razor.css which define the style.

::deep .rz-grid-table td, .rz-grid-table th {
    padding: 0.2rem;
}

enter image description here

Improve this answer
6
  • Wow. Thanks for all the work put into this. This is very good information. However, this seems like a lot of trouble just to put into css isolation when I can just keep the style tag in the .razor file. I tried adding the "::deep" syntax to the app.css file and the system balks, saying, "::deep is only allowed in file names ending with '.razor.css or cshtml.css'". So I'm still left without a way to globally modify the line height in the RadzenGrid objects.
    – Mark Bonafe
    Commented Jul 9 at 20:09
  • globally modify the line height in the RadzenGrid objects -> is your ultimate goal right?
    – Tiny Wang
    Commented Jul 10 at 3:10
  • That is correct.
    – Mark Bonafe
    Commented Jul 10 at 4:09
  • @MarkBonafe please add !important for the style. See my update above.
    – Tiny Wang
    Commented Jul 10 at 7:21
  • Thanks. Now I can't tell it this is working or not. I removed the style for the page and added it to app.css with the !important feature. I set the spacing to a high number to see if it worked, but my grid is still spaced as though I didn't make any changes at all. I've cleared the cache. Weird.
    – Mark Bonafe
    Commented Jul 12 at 19:15

Not the answer you're looking for? Browse other questions tagged or ask your own question.