Skip to main content
A newer version of this page is available. .

DxGrid.CssClass Property

Specifies the name of a CSS class applied to the Grid.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public string CssClass { get; set; }

Property Value

Type Default Description
String null

The CSS class name.

Remarks

The CssClass property allows you to customize the Grid’s appearance. The assigned CSS class is added to the Grid’s root element. For general information about CSS classes in Blazor applications, see the following topic: CSS Classes.

The Grid consists of Bootstrap elements (card, table, and so on) and standard HTML elements (div, input, and so on). You can use the CssClass property to apply CSS classes to any of these elements. Refer to the following articles for more information:

The example below changes the Grid’s background color.

@inject WeatherForecastService ForecastService

<style>
    .my-style .card{
        background-color: lavender;
    }
</style>

<DxGrid Data="@Data" CssClass="my-style">
    <Columns>
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" />
        <DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" Width="120px" />
        <DxGridDataColumn FieldName="TemperatureF" Caption="@("Temp. (\x2109)")" Width="120px" />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }
}

Blazor Grid CSS Class

Implements

See Also