Row in Blazor DataGrid Component
24 Feb 20225 minutes to read
The row represents record details fetched from data source.
Row customization
Using event
You can customize the appearance of a row by using the RowDataBound event. The RowDataBound event triggers for every row. In the event handler, you can get the RowDataBoundEventArgs that contains details of the row.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@Orders" EnableHover=false AllowSelection=false Height="280">
<GridEvents TValue="Order" RowDataBound="RowBound"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Width="110"> </GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" Width="110"></GridColumn>
<GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Width="110"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Width="110"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Width="110" Type="ColumnType.Date"></GridColumn>
</GridColumns>
</SfGrid>
<style>
.below-25 {
background-color: orangered;
}
.below-35 {
background-color: yellow;
}
.above-35 {
background-color: greenyellow
}
</style>
@code {
public List<Order> Orders { get; set; }
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
OrderID = 1000 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
ShipCity = (new string[] { "Berlin", "Madrid", "Cholchester", "Marseille", "Tsawassen" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
}).ToList();
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
public void RowBound(RowDataBoundEventArgs<Order> args)
{
if (args.Data.Freight < 25)
{
args.Row.AddClass(new string[] { "below-25" });
}
else if (args.Data.Freight < 35)
{
args.Row.AddClass(new string[] { "below-35" });
}
else
{
args.Row.AddClass(new string[] { "above-35" });
}
}
}
Using CSS customize alternate rows
You can change the datagrid’s alternative rows background color by overriding the .e-altrow class.
.e-grid .e-altrow {
background-color: #fafafa;
}
Please refer to the following example.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@Orders" Height="280">
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Width="110"> </GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" Width="110"></GridColumn>
<GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Width="110"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Width="110"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Width="110" Type="ColumnType.Date"></GridColumn>
</GridColumns>
</SfGrid>
<style type="text/css" class="cssStyles">
.e-grid .e-altrow {
background-color: #fafafa;
}
</style>
@code {
public List<Order> Orders { get; set; }
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
OrderID = 1000 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
ShipCity = (new string[] { "Berlin", "Madrid", "Cholchester", "Marseille", "Tsawassen" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
}).ToList();
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
}