I have a Telerik Dialog:
@using Telerik.Blazor.Components
<TelerikDialog @bind-Visible="@Visible" Width="320px" Title="Submit the page">
<DialogContent>
<div id="dialog-form-fileupload">
<div id="divMessagesFile" class="en-form-row en-message-warning">
</div>
<div class="col-md-12">
<div class="form-group">
<InputFile OnChange="@LoadFiles">
</InputFile>
</div>
<div class="form-group">
<label>Documentsoort</label>
<div>
<TelerikDropDownList Data="@DocumentTypes" TextField="Value" ValueField="Key" @bind-Value="@DocumentType" @ref="@DocumentTypesRef"
OnChange="OnDocumentTypeChanged"></TelerikDropDownList>
</div>
<div><span>@IsEnabled</span></div>
</div>
<div class="form-group">
<label>Meesturen naar aannemer</label>
<div class="form-check form-check-inline">
<TelerikCheckBox id="send-to-contractor" class="form-check-input" @bind-Value="@SentToContractor" Enabled="@IsEnabled" @ref="@SentToContractorRef" />
</div>
</div>
</div>
</div>
</DialogContent>
<DialogButtons>
<TelerikButton ButtonType="@ButtonType.Button" class="btn btn-primary ms-2" OnClick="@Save">Opslaan</TelerikButton>
<TelerikButton ButtonType="@ButtonType.Button" class="btn btn-primary ms-2" OnClick="@Cancel">Annuleren</TelerikButton>
</DialogButtons>
</TelerikDialog>
My problem is with the TelerikDropDownList and the TelerikCheckBox. In my OnDocumentTypeChanged I want to check/unchech and enable/disable the chekbox depending from the selected item in de dropdownlist.
I tried many ways but the checkbox did not change, i even put a span with the value of the IsEnabled, and also that didn't change.
However when I close the popup, and open it again, the values are correctly set
THis is the "close"function
private void Cancel()
{
Visible = false;
}
These are the OnDocumentTypeChanged functions I used but did not work
public void OnDocumentTypeChanged(object newValue)
{
var selectedItem = DocumentTypes.FirstOrDefault(item => item.Key == newValue as string);
if (selectedItem != null)
{
IsEnabled = selectedItem.OpdrachtberichtWijzigbaar;
SentToContractor = selectedItem.Opdrachtbericht;
}
StateHasChanged();
}
public async Task OnDocumentTypeChanged(object newValue)
{
var selectedItem = DocumentTypes.FirstOrDefault(item => item.Key == newValue as string);
if (selectedItem != null)
{
IsEnabled = selectedItem.OpdrachtberichtWijzigbaar;
SentToContractor = selectedItem.Opdrachtbericht;
}
await InvokeAsync(StateHasChanged);
return Task.CompletedTask;
}
public async Task OnDocumentTypeChanged(object newValue)
{
var selectedItem = DocumentTypes.FirstOrDefault(item => item.Key == newValue as string);
if (selectedItem != null)
{
await InvokeAsync(() =>
{
IsEnabled = selectedItem.OpdrachtberichtWijzigbaar;
SentToContractor = selectedItem.Opdrachtbericht;
});
// Trigger a UI update
StateHasChanged();
}
}
But I always get the same resutl, the checkbox' state is not changed only when i close the dialog and reopen it.
I also tried to close the dialog within the OnDocumentTypeChanged, by putting Visible = false; in it
And strangely, that did work, ANyone knows what I did wrong?