Duplicate Key Values in the If/Else Statement

• Jul 18, 2023

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 CellEditTemplate for the 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.

<DxGrid Data="@GridData" EditMode=GridEditMode.EditRow >
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn Caption="Availability" FieldName="isAvailable">
            <CellEditTemplate>
                @{
                    var editModel = (Product)@context.EditModel;
                    if (editModel.isAvailable) {
                        <input @key="@editModel" type="checkbox" checked
                        @onchange=@(eventArgs => { editModel.isAvailable = (bool)eventArgs.Value; }) />
                    }
                    else {
                        <input @key="@editModel" type="checkbox"
                        @onchange=@(eventArgs => { editModel.isAvailable = (bool)eventArgs.Value; }) />
                    }
                }
            </CellEditTemplate>
    </Columns>
</DxGrid>

To fix the issue, use unique @key values within the same if/else statement.