Is it possible to do conditional row editing and change different color in Blazor DataGrid?

[Syncfusion Support]

Answer:

Using RowDataBound and OnActionBegin event we can highlight and disable a row from editing in the Grid. The RowDataBound event will be triggered when row is begin created. In this event we can add class to row element to highlight the row.

Similarly OnActionBegin event will be triggered when editing a record. We can prevent the default action using Cancel property of ActionBegin event arguments. Here is the code snippet for your reference,

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

<GridEvents RowDataBound="RowDataBound" OnActionBegin="ActionBegin" TValue="Order">GridEvents>

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal">GridEditSettings>

<GridColumns>

<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120">GridColumn>

<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120">GridColumn>

<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" 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" EditType="EditType.NumericEdit" Width="120">GridColumn>

<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150">GridColumn>

GridColumns>

SfGrid>

<style>

.disablerow{

background-color: red;

}

style>

@code{

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

public void RowDataBound(RowDataBoundEventArgs<Order> Args)

{

if(Args.Data.CustomerID == "ALFKI")

{

Args.Row.AddClass(new string[] { "disablerow" });

}

}

public void ActionBegin(ActionEventArgs<Order> Args)

{

if(Args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit)

{

if(Args.Data.CustomerID == "ALFKI")

{

Args.Cancel = true; // to prevent the default action

}

}

}

In the above code snippet the record with CustomerID equals ALFKI have been Prevented from editing and row has been disabled. Find the sample here.