Duplicate Key Values in the If/Else Statement
If you use the same @key value for different HTML elements in the if/else statement, your code can produce incorrect behavior (for instance, styles and classes assigned to these elements are lost). For more information, refer to the following issue: Duplicate @key values don’t throw clear exception in if/else case.
The following code snippet creates the EditTemplate for the Data Grid’s Availability column. A user can change the initial checkbox state in the edit form, but if the user clicks the checkbox again, it is replaced with the standard column editor.
<DxDataGrid Data="@DataSource" ...>
<DxDataGridColumn Field="@nameof(Product.Availability)" Caption="Availability" Width="150px">
<EditTemplate>
@{
var dataItem = ((CellEditContext)context).DataItem;
var inStock = (bool)((CellEditContext)context).CellValue;
if (inStock)
{
<input @key="@dataItem" type="checkbox" @onchange=@(args =>
{ ((CellEditContext)context).OnChanged(args.Value); }) checked />
}
else
{
<input @key="@dataItem" type="checkbox" @onchange=@(args =>
{ ((CellEditContext)context).OnChanged(args.Value); }) />
}
}
</EditTemplate>
</DxDataGridColumn>
</DxDataGrid>
To fix the issue, use unique @key values within the same if/else statement.