The Data Grid is Re-rendered Incorrectly After a Property Is Changed

• Oct 04, 2023

The Blazor Data Grid (DxDataGrid<T>) can be rendered incorrectly when you bind its property to a model field and update the field value outside the Data Grid’s code. For instance, this issue occurs for the following properties: DataNavigationMode, VerticalScrollBarMode, HorizontalScrollBarMode, and so on.

Razor

<DxButton Text="Show All Rows" Click="@OnClick" />

<DxDataGrid Data="@Orders" DataNavigationMode="@MyField">
    @*...*@
</DxDataGrid>

@code {
    // ...
    DataGridNavigationMode MyField = DataGridNavigationMode.Paging;

    void OnClick(MouseEventArgs args) {
        MyField = DataGridNavigationMode.ShowAllDataRows;
    }
}

To resolve the issue, follow the steps below:

1. Specify the Data Grid’s @key attribute.
2. Generate a new key after the property value is changed to re-render the Data Grid.

Razor

<DxButton Text="Show All Rows" Click="@OnClick" />

<DxDataGrid Data="@Orders" DataNavigationMode="@MyField" @key="myKey">
    @*...*@
</DxDataGrid>

@code {
    // ...
    Guid myKey = Guid.NewGuid();
    DataGridNavigationMode _MyField { get; set; } = DataGridNavigationMode.Paging;
    DataGridNavigationMode MyField {
        get {return _MyField; }
        set {
            _MyField = value;
            myKey = Guid.NewGuid();
        }
    }

    void OnClick(MouseEventArgs args) {
          MyField = DataGridNavigationMode.ShowAllDataRows;
    }
}