Skip to main content

DxGrid.CssClass Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.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 demonstrates how to apply a CSS class to the card element:

@inject WeatherForecastService ForecastService

<style>
    .my-style .card{
        <!-- your CSS rules -->
    }
</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();
    }
}

Implements

See Also