I'm getting a JavaScript error when I open a TelerikDialog that has a TelerikScheduler in it. The error is:
telerik-blazor.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'filter')
at m.handleOverflowingItems (telerik-blazor.js:1:2451674)
at e.ResizeService.onResize [as resizeCallback] (telerik-blazor.js:1:2446927)
at ResizeObserver.onResize (telerik-blazor.js:1:2228100)
at telerik-blazor.js:1:2239508
I have a reproduction here, specifically in this page. The error appears when you click the button and the dialog opens. If I remove the Scheduler, the error goes away. The configuration for the Scheduler was taken from the overview page.
This is happening with Telerik Blazor 8.0. I checked with version 6.2 and it didn't show an error in that case.
EDIT: Title should say *Can't* enable/disable DropDownList rather than *Can*
I have a Dialog component with a DropDownList and a MultiSelect. When no items are selected in the MultiSelect, I want the DropDownList to be disabled. I've set it up like so:
<TelerikDropDownList Data="@Data" @bind-Value="@SelectedValue" Enabled="@IsEnabled"/>
<TelerikMultiSelect Data="@SelectData"
TextField="Text"
ValueField="TheValue"
OnChange="@SelectChange"
@bind-Value="@SelectValue"/>
@code {
public class MyData
{
public string Text { get; set; }
public string TheValue { get; set; }
}
private string @SelectedValue { get; set; } = "One";
private List<string> Data { get; set; } =
[
"One",
"Two",
"Three"
];
private List<MyData> SelectData { get; set; } =
[
new MyData { Text = "One", TheValue = "1" },
new MyData { Text = "Two", TheValue = "2" },
new MyData { Text = "Three", TheValue = "3" }
];
private List<string> SelectValue { get; set; } = [];
private bool IsEnabled = false;
private void SelectChange()
{
IsEnabled = SelectValue.Count > 0;
}
}
When I put the DropDownList and MultiSelect directly into a Dialog, this doesn't work. Specifically, when I add items to the MultiSelect, the DropDownList doesn't get enabled. However, when I move this exact same code into a separate component and then embed THAT component into the Dialog, then it does. Any ideas why that would be?
I have a reproduction of the issue here: https://github.com/kbaley/TelerikBlazor/blob/main/TelerikBlazor/TelerikBlazor.Client/Pages/Home.razor
EDIT: I've tried calling StateHasChanged in the SelectChange handler but it doesn't change the behaviour.
The default visuals for the DialogFactory are distractingly different (aka ugly) from my application visuals. Is there any way to modify the predefined dialogs? I think they're a great idea and they do save me time on creating a custom component, but they seem visually inflexible?
Rob.
I am working with a DataGrid, and in the on-save event,
I need to validate some data. In certain cases,
I must display a dialog that allows the user to decide whether to save or cancel the update,
based on data retrieved from the API.
Is it possible to "hack" the DialogFactory to achieve this?
One of the DropDownButtonItem in my TelerikDropDownButton control is Delete.
The OnClick method for the Delete DropDownButtonItem uses Dialogs.ConfirmAsync to make sure that the user really wants to perform the delete.
The issue is that the Delete button item is still visible when the ConfirmAsync window pops up. Depending on where the TelerikDropDownButton is on the page, the DropDownButtonItem overlaps the ConfirmAsync window.
Here's an example that shows the DropDownButtonItem is visible when the popup is displayed: https://blazorrepl.telerik.com/GylvcgFS09nqh4ZM26
Is there a way to hide the DropDownButtonItem after it is clicked?
Hello there,
I am using the Telerik Predefined Dialogs for several different uses, and I want to add the x Close icon in the upper right corner. I know it's redundant, but it's a project requirement and it also seems to be best practice for UI/UX.
if (DisclosureReportSelections.ActivitySelection == -1) { await Dialogs.AlertAsync("Activity must be reported for this period.", "Report Information Required"); return false; }
I like the Predefined Dialogs because they provide 'await' for the user's response, which is handy and efficient in code. I do not want the hassle of customizing a standard Dialog while managing it's visible state.
Attached image for reference.
I have a bool property binded in two way to a dialog checkbox.
if i change the check value, the variabile inside the dialog in binded correctly, but the variable binded in the main component in not updated.
Check this sample, if i set the check and close the dialog, the parent compoent variable is not updated.
https://blazorrepl.telerik.com/ceuZbwah44LSdBQu06
how to solve?
Main.Razor
}
CheckDialog.Razor
When i have a TelerikDialog and press ESC key, the dialog is hidden.
How to avoid this as a default behaviour?
can you add a property for it, for example IgnoreEscapeKey="true"?
there is another way to solve?
Thanks
Can you explain the differences between the Dialog vs the Window Component? And maybe give an example of when you should use one over the other?
IN their current form, they seem pretty similar in implementation and functionality if you put aside the predefined dialogs.
On the Filter component I have observed that when it is added to a Dialog component it no longer functions correctly. You can add filters but can't remove any of them without generating an exception.
The Filter component will allow you to add filters but if you click the 'x' to remove a filter it will not remove. Clicking the 'x' again results in an error:
Unhandled exception rendering component: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
Exception: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
at System.Collections.ObjectModel.Collection`1.RemoveAt(Int32 index)
at Telerik.Blazor.Components.Filter.FilterGroup.OnFilterRemove(Int32 index, String removedFilterId)
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
I also noticed that if you remove the binding from the Filter it fails the same way: https://blazorrepl.telerik.com/weEHQCQa49xsfTxF28