How to highlight cells that are read only in a column for Blazor DataGrid?

[Syncfusion Support]

Answer:

By using the QueryCellInfo event we can get column details as arguments. Based on the column details we can add the Class to DOM element (cell) using AddClass method. Here is the code snippet for your reference.

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315">

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true">GridEditSettings>

<GridEvents QueryCellInfo="QueryCellInfoHandler" TValue="Order">GridEvents>

<GridColumns>

<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" AllowEditing="false" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120">GridColumn>

<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120">GridColumn>

<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" AllowEditing="false" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date">GridColumn>

<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120">GridColumn>

GridColumns>

SfGrid>

<style>

/*to highlight column content*/

.e-rowcell.e-attr {

background-color: lightgrey;

}

style>

@code{

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

public void QueryCellInfoHandler(QueryCellInfoEventArgs<Order> args)

{

if (!args.Column.AllowEditing) // check for your condition here

{

args.Cell.AddClass(new string[] { "e-attr" });

}

}