How can I help you?
Style and appearance in Syncfusion Blazor DataGrid
7 Nov 202516 minutes to read
The Syncfusion® Blazor DataGrid supports visual customization using CSS and theme-based styling. Styles can be applied to various elements to match the application’s design. Styling options are available for:
- DataGrid root element: Defines the overall appearance of the grid container.
- Alternate rows with frozen columns: Applies styles to alternate rows when frozen columns are enabled.
- Grid lines: Controls the color and visibility of horizontal and vertical lines between cells.
Override Default Styles:
Default styles such as colors, typography, spacing, and borders can be customized using CSS. Use browser developer tools to inspect the rendered HTML and identify relevant selectors. Where possible, use CSS variables or theme tokens to maintain consistency across components.
.e-grid .e-headercell {
background-color: #333; /* Override the header background color */
color: #fff;
}Properties like background-color, color, font-family, and padding can be changed to match the grid layout design and improve visual consistency.
Using Theme Studio:
Syncfusion Theme Studio provides a unified approach to style all components, including the Blazor DataGrid.
- Open the Syncfusion® Theme Studio.
- Select Grid in the left panel.
- Customize colors, typography, spacing, and other visual tokens.
- Download the generated CSS and include it in the Blazor project’s site stylesheet or theme bundle.
Customize the DataGrid root element
The .e-grid class styles the root container of the Blazor DataGrid. Apply CSS to modify its appearance:
.e-grid {
font-family: cursive;
}Properties such as f font-family,background-color, and spacing-related styles can be adjusted to align with the grid design.
This customization applies a cursive font to the grid content. Additional styling can be applied to rows, alternate rows, selected rows, and hover states. Avoid using !important for hover styles in production environments. Instead, increase selector specificity to maintain consistent styling control.
@using Syncfusion.Blazor.Grids
<SfGrid @ref="Grid" DataSource="@Orders" Height="315" AllowPaging="true">
<GridSelectionSettings Type="SelectionType.Multiple"></GridSelectionSettings>
<GridPageSettings PageSize="8"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="140"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
</GridColumns>
</SfGrid>
<style>
.e-grid {
font-family: cursive;
/* Optional: set a base background for the grid area */
/* background-color: #fafafa; */
}
/* Prefer specificity over !important for hover */
.e-grid .e-content .e-row:hover .e-rowcell {
background-color: rgb(204, 229, 255);
}
.e-grid .e-rowcell.e-selectionbackground {
background-color: rgb(230, 230, 250);
}
.e-grid .e-row.e-altrow {
background-color: rgb(150, 212, 212);
}
.e-grid .e-row {
background-color: rgb(180, 180, 180);
}
/* Optional: keyboard focus visibility */
.e-grid .e-row:focus-visible .e-rowcell {
outline: 2px solid #005a9e;
outline-offset: -2px;
}
</style>
@code {
private SfGrid<OrderData> Grid;
private List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
}internal sealed class OrderData
{
private static readonly List<OrderData> Data = new();
public OrderData(int orderId, string customerId, double freight, string shipCity)
{
OrderID = orderId;
CustomerID = customerId;
Freight = freight;
ShipCity = shipCity;
}
internal static List<OrderData> GetAllRecords()
{
if (Data.Count == 0)
{
Data.Add(new OrderData(10248, "VINET", 32.38, "Reims"));
Data.Add(new OrderData(10249, "TOMSP", 11.61, "Münster"));
Data.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro"));
Data.Add(new OrderData(10251, "VICTE", 41.34, "Lyon"));
Data.Add(new OrderData(10252, "SUPRD", 51.30, "Charleroi"));
Data.Add(new OrderData(10253, "CHOPS", 58.17, "Bern"));
Data.Add(new OrderData(10254, "RICSU", 22.98, "Genève"));
Data.Add(new OrderData(10255, "WELLI", 13.97, "San Cristóbal"));
Data.Add(new OrderData(10256, "HILAA", 81.91, "Graz"));
}
return Data;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
}Customize alternate rows with frozen columns
The .e-altrow .e-rowcell selector styles cells in alternate rows when Frozen columns are enabled in the Blazor DataGrid.
.e-grid .e-altrow .e-rowcell {
background-color: #E8EEFA;
}Adjust properties like background-color,font-family, and border to maintain consistent styling across frozen and movable sections.
@using Syncfusion.Blazor.Grids
<SfGrid @ref="Grid" DataSource="@Orders" Height="315" AllowPaging="true">
<GridPageSettings PageSize="8"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" IsFrozen="true" TextAlign="TextAlign.Right" Width="140"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
</GridColumns>
</SfGrid>
<style>
/* Applies to alt rows across frozen and movable sections */
.e-grid .e-altrow .e-rowcell {
background-color: #E8EEFA;
}
</style>
@code {
private SfGrid<OrderData> Grid;
private List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
}internal sealed class OrderData
{
private static readonly List<OrderData> Data = new();
public OrderData(int orderId, string customerId, double freight, string shipCity)
{
OrderID = orderId;
CustomerID = customerId;
Freight = freight;
ShipCity = shipCity;
}
internal static List<OrderData> GetAllRecords()
{
if (Data.Count == 0)
{
Data.Add(new OrderData(10248, "VINET", 32.38, "Reims"));
Data.Add(new OrderData(10249, "TOMSP", 11.61, "Münster"));
Data.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro"));
Data.Add(new OrderData(10251, "VICTE", 41.34, "Lyon"));
Data.Add(new OrderData(10252, "SUPRD", 51.30, "Charleroi"));
Data.Add(new OrderData(10253, "CHOPS", 58.17, "Bern"));
Data.Add(new OrderData(10254, "RICSU", 22.98, "Genève"));
Data.Add(new OrderData(10255, "WELLI", 13.97, "San Cristóbal"));
Data.Add(new OrderData(10256, "HILAA", 81.91, "Graz"));
}
return Data;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
}Customize the color of grid lines
The Syncfusion® Blazor DataGrid allows customization of grid lines to match application design requirements. Apply CSS to structural elements such as header cells, row cells, and the grid container to control color, thickness, and border style.
The GridLines property defines border visibility and supports options for Horizontal, Vertical, Both, or None.
/* Customize the color of Grid lines */
.e-grid .e-gridheader, .e-grid .e-headercell, .e-grid .e-rowcell, .e-grid {
border-color: yellow;
border-style: solid;
border-width: 2px;
}
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@Orders" Height="315" GridLines="GridLine.Both">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" TextAlign="TextAlign.Right" Format="C2" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" Width="130"></GridColumn>
</GridColumns>
</SfGrid>
<style>
/* Customize the color and thickness of grid lines */
.e-grid .e-gridheader,
.e-grid .e-headercell,
.e-grid .e-rowcell,
.e-grid {
border-color: yellow;
border-style: solid;
border-width: 2px;
}
/* Optional: ensure header divider lines are visible */
.e-grid .e-headercell {
border-right-width: 2px;
}
</style>
@code {
private List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
}internal sealed class OrderData
{
private static readonly List<OrderData> Data = new();
public OrderData(int orderId, string customerId, double freight, DateTime orderDate)
{
OrderID = orderId;
CustomerID = customerId;
Freight = freight;
OrderDate = orderDate;
}
internal static List<OrderData> GetAllRecords()
{
if (Data.Count == 0)
{
Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(1996, 7, 4)));
Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5)));
Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6)));
Data.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7)));
Data.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(1996, 7, 8)));
Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9)));
Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10)));
Data.Add(new OrderData(10255, "VINET", 148.33, new DateTime(1996, 7, 11)));
Data.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 7, 12)));
}
return Data;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public DateTime OrderDate { get; set; }
}