RadzenDatagrid Header Color Not Change

Radzen.Blazor Components
1

I want the white area in the datagrid to be colored as follows, but I can't find how to do it. I don't understand anything from the document. The code is like this and the white area is like this, but the white area should be in the following color

<RadzenDataGrid @ref="radzenDataGrid"
                        AllowFiltering="true"
                        AllowColumnResize="true"
                        AllowAlternatingRows="false"
                        FilterMode="FilterMode.Simple"
                        AllowSorting="true"
                        Filter="@OnFilter"
                        PageSize="5"
                        AllowPaging="true"
                        PagerHorizontalAlign="HorizontalAlign.Left"
                        ShowPagingSummary="true"
                        Data="@customerOrderDtos"
                        TItem="CustomerOrderDto"
                        ColumnWidth="90px"
                        Style="background-color:#c6c3c6;"
                        GridLines="DataGridGridLines.Both"
                        SelectionMode="DataGridSelectionMode.Single"
                        Density="Density.Compact"
                        FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive">
            <Columns>
 
                <RadzenDataGridColumn TItem="CustomerOrderDto" Property="CustomerOrderId" Title="Bobin Numarası" Width="90px" />
                <RadzenDataGridColumn TItem="CustomerOrderDto" Property="CustomerOrderStatusName" Title="Bobin Durumu" Width="90px" />
                <RadzenDataGridColumn TItem="CustomerOrderDto" Property="Name" Title="Kalınlık" Width="90px" />
                <RadzenDataGridColumn TItem="CustomerOrderDto" Property="Remark" Title="Genişlik" Width="90px" />
                <RadzenDataGridColumn TItem="CustomerOrderDto" Property="OrderNumber" Title="Ağırlık" Width="90px" />
                <RadzenDataGridColumn TItem="CustomerOrderDto" Property="OrderNumber" Title="Uzunluk" Width="90px" />
                <RadzenDataGridColumn TItem="CustomerOrderDto" Property="OrderNumber" Title="İç Çap" Width="90px" />
                <RadzenDataGridColumn TItem="CustomerOrderDto" Property="OrderNumber" Title="Dış Çap" Width="90px" />
                <RadzenDataGridColumn TItem="CustomerOrderDto" Property="CustomerOrderId" Title="İşlemler" Width="90px">
                    <Template Context="data">
                        <RadzenButton ButtonStyle="ButtonStyle.Warning" Variant="Variant.Flat" Shade="Shade.Lighter" Icon="pageview" class="m-1" Click="@(()=>OpenCustomerOrderDlg(data.CustomerOrderId,"update"))" />
                        <RadzenButton ButtonStyle="ButtonStyle.Danger" Variant="Variant.Flat" Shade="Shade.Lighter" Icon="delete" class="m-1" Click="@(()=>DeleteCustomerOrder(data))" />
                        <RadzenButton ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Shade="Shade.Lighter" Icon="list" class="m-1" Click="@(()=>ChangePdiStatus(data.CustomerOrderId))" />
                    </Template>
                </RadzenDataGridColumn>
            </Columns>
        </RadzenDataGrid>

Ekran Alıntısı
Ekran Alıntısı1877×320 9.91 KB

2

Hi @berattozaydin,

Please use English.

3

Sorry. I updated my problem. @korchev

4

You can check this thread How to Set the background color of all columns for a grid - #9 by korchev

5

@korchev So how can i adjust the textbox size under this? I can't access the css content by typing --rz

6

Use your browser's developer tools to inspect the desired element - right click it and select "Inspect" or "Inspect element". This shows all CSS rules that apply to it.

image
image2790×536 150 KB

For example from this screenshot we see that the following CSS variables are used - --rz-input-height and --rz-input-line-height. You can specify custom values via the style attribute of RadzenDataGrid.

<RadzenDataGrid style="--rz-input-height: 16px; --rz-input-line-height: 16px;" ...>