How to Apply Strike-Through Styling to Rows in Blazor DataGrid?

Overview

In certain scenarios, you may want to visually differentiate specific rows in the Syncfusion Blazor DataGrid based on their underlying data values. A simple and effective way to achieve this is by applying a strike-through style to rows that meet certain conditions. This can be implemented using CSS combined with the RowDataBound event.

Implementation Steps

1. Define CSS Class for Strike-Through

Place this CSS in your component or global stylesheet:

<style>
  .strike-through {
      text-decoration: line-through;
  }
</style>

2. Configure the Grid and Handle RowDataBound

Define the Syncfusion Blazor DataGrid component with the RowDataBound event, which is triggered during the generation of each row.

<SfGrid DataSource="@Orders" AllowPaging="true" Height="315">
    <GridEvents RowDataBound="RowBound" TValue="Order"></GridEvents>
    <GridColumns>
        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120"></GridColumn>
        <GridColumn Field="@nameof(Order.CustomerName)" HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@code {
    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
    {
        Orders = new List<Order>
        {
            new Order { OrderID = 1, CustomerName = "Nancy", Freight = 10 },
            new Order { OrderID = 2, CustomerName = "Andrew", Freight = 20 },
            new Order { OrderID = 3, CustomerName = "Janet", Freight = 30 }
        };
    }

    public class Order
    {
        public int OrderID { get; set; }
        public string CustomerName { get; set; }
        public double Freight { get; set; }
    }
}

3. Apply the specific class name strike-through to required records

Use the RowDataBound event handler to apply the globally defined strike-through class to the necessary records.

  public void RowBound(RowDataBoundEventArgs<Order> args)
    {
        if (args.Data.Freight >= 15 && args.Data.Freight <= 25)
        {
            args.Row.AddClass(new string[] { "strike-through" });
        }
    }    
}

Explanation

CSS Class: Applies text-decoration: line-through to the row.
RowDataBound Event: Executes for each row after data binding.
Conditional Styling: Rows with Freight values between 15 and 25 are styled with strike-through.

Use Cases

Highlight outdated or invalid records.
Mark rows requiring review.
Provide visual cues for business rules.

Sample

Live Demo

Conclusion

By combining CSS with the RowDataBound event, you can easily apply strike-through styling to specific rows in Syncfusion Blazor DataGrid. This technique improves readability and provides clear visual indicators for conditional data.

We hope you enjoyed learning how to apply strike-through styling to rows in Blazor DataGrid.

You can refer to our Blazor DataGrid feature tour to learn about other powerful features. Explore our Blazor DataGrid Documentation to understand how to present and manipulate data.

For current customers, visit the License and Downloads page. If you’re new to Syncfusion, try our 30-day free trial to explore the Blazor DataGrid and other components.

If you have any questions or need assistance, feel free to reach out via our support forums, Direct-Trac, or feedback portal.

Did you find this information helpful?

Yes

Comments (0)