We are creating our first Blazor application and started using the Radzen Components. For the most part everything is working perfectly. The following case does not work as expected though.
We have a form with (amongst other components) an Accordion. In all AccoridionItems a table is present containing a RadzenLabel and RadzenIcon. The Icon is made clickable. Here's part of that code:
@if (TimeEditCourseEvents.Count() > 0)
{
<RadzenAccordion Multiple="true" Style="width: 100%">
<Items>
@foreach (var keyValuePair in TimeEditCourseEventAndSchedulingGroup)
{
<RadzenAccordionItem Text=@keyValuePair.Key.Id>
@if (keyValuePair.Value.Count() > 0)
{
<RadzenAccordion Expand=@(args => TimeEditSelectionChanged(keyValuePair.Value.ElementAt((int)args)))>
<Items>
@foreach (var schedulingGroup in keyValuePair.Value)
{
<RadzenAccordionItem Text=@schedulingGroup.Name Icon=@(schedulingGroup.IsLinked ? "link" : string.Empty)>
<div>
<span class="telistreservations">
<ReservationDisplay Reservations=@(TimeEditSchedulingGroupAndReservation.ContainsKey(schedulingGroup)
? TimeEditSchedulingGroupAndReservation[schedulingGroup]
: null) />
</span>
<table>
<tr>
<td>
@if (schedulingGroup.ObjectInfo.Count(oi => oi != null) > 0)
{
var brightSpaceGroups = schedulingGroup.ObjectInfo
.Where(oi => !string.IsNullOrWhiteSpace(oi))
.ToDictionary(oi => oi, oi => GetBSGroupName(oi));
<div class="row">
@if (brightSpaceGroups.Count() > 0)
{
@foreach (var keyValuePair in brightSpaceGroups)
{
<div class="flex-row smallbutton">
<RadzenLabel Text=@keyValuePair.Value />
<RadzenIcon @onclick="() => UnlinkFromBrightSpace(schedulingGroup.ExtId, keyValuePair.Key)" Icon="link_off" />
</div>
}
<div>
<RadzenLabel Text="Unlink all" />
<RadzenIcon @onclick="() => UnlinkAllFromBrightSpace(schedulingGroup.ExtId, brightSpaceGroups)" Icon="link_off" />
</div>
}
else
{
<RadzenLabel Text="No BrightSpace groups linked" />
}
</div>
}
else
{
<RadzenLabel Text="No BrightSpace groups found" />
}
</td>
</tr>
</table>
</div>
</RadzenAccordionItem>
}
</Items>
</RadzenAccordion>
}
else
{
<RadzenLabel>No BrightSpace groups linked</RadzenLabel>
}
</RadzenAccordionItem>
}
</Items>
</RadzenAccordion>
When I click on one of the icons which is a linked item in the database, that link should be removed and the view should reflect that. What happens is that the item is refreshed after the StateHasChanged() but in the wrong way. The 'ReservationDisplay' component vanishes and all the Links remain. Collapsing and expanding the AccordionItem renders the content correctly (the 'ReservationDisplay' is displayed again and the remove link(s) are gone.
Here's the code behind:
public async void UnlinkFromBrightSpace(string timeEditKey, string key)
{
var allKeys = new List<string>() { key };
await UnlinkFromBrightSpace(timeEditKey, allKeys);
}
public async void UnlinkAllFromBrightSpace(string timeEditKey, Dictionary<string, string> brightSpaceGroups)
{
var allKeys = brightSpaceGroups
.Select(keyValuePair => keyValuePair.Key)
.ToList();
await UnlinkFromBrightSpace(timeEditKey, allKeys);
}
private async Task UnlinkFromBrightSpace(string timeEditKey, List<string> allKeys)
{
allKeys = allKeys.Where(key => !string.IsNullOrWhiteSpace(key)).ToList();
if (!await _groupsService.DeleteBrightSpaceGroupLinkFromTimeEditGroup(await CourseId(), allKeys, timeEditKey))
{
_notificationService.Toast(NotificationSeverity.Error, "Unlinking failed");
}
else
{
_notificationService.Toast(NotificationSeverity.Info, "Unlinking succeeded");
}
await InitializeBrightSpaceAndTimeEditLists();
}
private async Task InitializeBrightSpaceAndTimeEditLists()
{
await GetTimeEditSchedulingGroupsPerCourseEvents();
SetIsLinkedInBrightSpaceGroups();
SetIsLinkedInTimeEditGroups();
StateHasChanged();
}