Selection in Syncfusion Blazor DataGrid
2 May 202510 minutes to read
You can customize the appearance of the selection in the Syncfusion Blazor DataGrid using CSS. Here are examples of how to customize the row selection background, cell selection background, and column selection background.
Customizing the row selection background
To customize the appearance of row selection, you can use the following CSS code:
.e-grid td.e-selectionbackground {
background-color: #00b7ea;
}In this example, the .e-selectionbackground class targets the background color of the row selection. You can modify the background-color property to change the background color of the selected rows.
@using Syncfusion.Blazor.Grids
<SfGrid @ref="Grid" DataSource="@Orders" Height="315" AllowPaging="true">
<GridPageSettings PageSize="8"></GridPageSettings>
<GridSelectionSettings Mode="SelectionMode.Row" Type="SelectionType.Multiple"></GridSelectionSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="d" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
</GridColumns>
</SfGrid>
<style>
.e-grid td.e-selectionbackground {
background-color: #00b7ea;
}
</style>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, DateTime orderDate)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.OrderDate = orderDate;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10)));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11)));
Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12)));
Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13)));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14)));
Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15)));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16)));
Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17)));
Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18)));
Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19)));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public DateTime OrderDate { get; set; }
}Customizing the cell selection background
To customize the appearance of cell selection, you can use the following CSS code:
.e-grid td.e-cellselectionbackground {
background-color: #00b7ea;
}In this example, the .e-cellselectionbackground class targets the background color of the cell selection. You can modify the background-color property to change the background color of the selected cells.
@using Syncfusion.Blazor.Grids
<SfGrid @ref="Grid" DataSource="@Orders" Height="315" AllowPaging="true">
<GridPageSettings PageSize="8"></GridPageSettings>
<GridSelectionSettings Mode="SelectionMode.Cell" Type="SelectionType.Multiple"></GridSelectionSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="d" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>
</GridColumns>
</SfGrid>
<style>
.e-grid td.e-cellselectionbackground {
background-color: #00b7ea;
}
</style>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, DateTime orderDate)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.OrderDate = orderDate;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10)));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11)));
Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12)));
Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13)));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14)));
Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15)));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16)));
Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17)));
Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18)));
Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19)));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public DateTime OrderDate { get; set; }
}