Hi,
I have reason to believe that there might be a bug in the ExpandRow method of the DataGrid.
Code block 1:
<RadzenDataGrid Id="surveytable" @ref="_surveys" Data="@_ongoingSurveys" TItem="OngoingSurveysOverviewModel" @bind-Settings="@OngoingSettings"
AllowColumnResize="true" AllowAlternatingRows="true" AllowPaging="true" PageSize="10" ExpandMode="DataGridExpandMode.Single"
AllowSorting="true" AllowMultiColumnSorting="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
RowClick="OnSurveyRowClick" RowExpand="SaveExpandedRow" RowCollapse="RemoveExpandedRow">
When a user clicks on the expand/collapse icon in the first column of the grid it triggers the RowExpand or RowCollapse EventCallback.
I mimic the same behaviour in the RowClick where I execute the ExpandRow method which then triggers the correct EventCallback.
Code block 2:
private async void OnSurveyRowClick(DataGridRowMouseEventArgs<OngoingSurveysOverviewModel> surveyRow)
{
if (_rowClicked)
{
await _surveys.ExpandRow(surveyRow.Data);
}
_rowClicked = true;
}
private async Task SaveExpandedRow(OngoingSurveysOverviewModel? row)
{
if (_expandRowOnInit)
{
_expandRowOnInit = false;
}
else
{
await JsRuntime.InvokeVoidAsync("window.localStorage.setItem", "ExpandedRow", JsonSerializer.Serialize(row));
_expandedRow = row;
}
}
private async Task RemoveExpandedRow(OngoingSurveysOverviewModel row)
{
await Task.CompletedTask;
await JsRuntime.InvokeVoidAsync("window.localStorage.setItem", "ExpandedRow", null);
_expandedRow = null;
}
When the user navigates away from the page and returns, or executes an update of the page it should reload the expanded row.
In order to achieve that I get the expanded row by executing the LoadExpandRowAsync in the OnInitialized state.
FYI, SetDataAsync will load the necessary data from the database in the _ongoingSurveys IEnumerable.
Code block 3:
private bool _expandRowOnInit;
IEnumerable<OngoingSurveysOverviewModel> _ongoingSurveys = new List<OngoingSurveysOverviewModel>();
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
await SetDataAsync();
await LoadExpandedRowAsync();
_isSetData = false;
_isLoading = false;
}
private async Task LoadExpandedRowAsync()
{
await Task.CompletedTask;
var result = await JsRuntime.InvokeAsync<string>("window.localStorage.getItem", "ExpandedRow");
_expandedRow = !string.IsNullOrEmpty(result) ? JsonSerializer.Deserialize<OngoingSurveysOverviewModel>(result) : null;
if (_expandedRow != null)
{
_expandRowOnInit = true;
}
}
After that I use OnAfterRenderAsync to execute the ExpandRow method there which should then expand the correct row, this only needs to be achieved when private bool _expandRowOnInit is true.
This will also trigger the RowExpand EventCallback, but to prevent it from saving the same data to the localStorage I check if _expandRowOnInit is true, if so it should set it to false and return. (see Code block 2)
Code Block 4:
private bool _expandRowOnInit;
IEnumerable<OngoingSurveysOverviewModel> _ongoingSurveys = new List<OngoingSurveysOverviewModel>();
RadzenDataGrid<OngoingSurveysOverviewModel?> _surveys = new ();
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
if (firstRender)
{
await LoadStateAsync();
StateHasChanged();
}
if (_expandRowOnInit)
{
await _surveys.ExpandRow(_ongoingSurveys.FirstOrDefault(x => _expandedRow != null && x.SurveyId == _expandedRow.SurveyId));
}
}
Debugging shows me that in OnAfterRender the Expand method receives the correct row to be expanded but doesn't execute the command.
Kind regards
TinoS
