The Map/Route dialog is set with "CloseOnOverlayClick".  As soon as I display the Route Dialog it triggers prior form validation (see the Destination red text behind the Route dialog)?

<TelerikDialog @bind-Visible="@_viewRouteMap"
               ShowCloseButton="true"
               CloseOnOverlayClick="true">
    <DialogTitle>Route</DialogTitle>
    <DialogContent>
        <Map ZipCodeModelOrigin="@_selectedZipCodeOrigin" ZipCodeModelDestination="@_selectedZipCodeDestination"></Map>
    </DialogContent>
</TelerikDialog>

I've used my Route/Map component on other pages/components and not having this validation trigger issue.  It seems if I go more than 1 level of Dialogs I'll get this issue?

The code that makes the Map/Route dialog visible:

private async Task MapGeneralRateRouteHandler(MouseEventArgs args)
{
    // Get the coordinates from the ZipCodes table using current Origin, Destination zip code
    _selectedZipCodeOrigin = await ZipCodeService.GetByZipCode(_rateDispatch.OriginZipCode);
    _selectedZipCodeDestination = await ZipCodeService.GetByZipCode(_rateDispatch.DestinationZipCode);
    _viewRouteMap = true;
}

Hello,

Is there a way to show in a Dialog an html formated message ?
I would like to be able to do for instance something like this :

var value = await TelerikDialogs.PromptAsync(
                            new MarkupString($"<p>Please choose :</p><p>1) Value 1</p><p>2)...</p>",
                            "Pick an item",
                            "1"
                        );

And the same shall apply to AlertAsync() and ConfirmAsync() I guess.

Many thanks in advance !

Franck

I am working with two Telerik Dialogs in a Blazor page.
One dialog is shown when an AP Strategy validation is required, and the other dialog is a confirmation popup.

Here is the markup:

<TelerikDialog Class="manual-adjustment_dialogBox"
               @bind-Visible="@IsDialogBoxVisible"
               Width="600px"
               Title="Message from webpage"
               ShowCloseButton="false">
    <DialogContent>
        <p style="text-align: center;">@ConfirmMessage</p>
    </DialogContent>
    <DialogButtons>
        <TelerikButton Id="yes-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => OnConfirmClick()">Yes</TelerikButton>
        <TelerikButton Id="no-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => GoBackToPopUp()">No</TelerikButton>
    </DialogButtons>
</TelerikDialog>

<TelerikDialog Class="manual-adjustment_apStrategyDialogBox"
               @bind-Visible="@IsApStrategyValidationVisible"
               Width="600px"
               Title="Message from webpage"
               ShowCloseButton="true">
    <DialogContent>
        <p style="text-align: center;">@ConfirmMessage</p>
    </DialogContent>
    <DialogButtons>
        <TelerikButton Id="confirm-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => FixApStrategyAndGoBackToPopUp()">OK</TelerikButton>
        <TelerikButton Id="cancel-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => GoBackToPopUp()">Cancel</TelerikButton>
    </DialogButtons>
</TelerikDialog>

When the AP Strategy dialog is visible (IsApStrategyValidationVisible = true), the user clicks OK, which calls this method:

public void FixApStrategyAndGoBackToPopUp()
{
    IsApStrategyValidationVisible = false;

    if (ManualAdjustmentArDTO.Amount == BundleUIResults.Bundle.Amount &&
        (ManualAdjustmentArDTO.APStrategyAdjustment == BundleManager.Schemas.Core.Content.APStrategy.ProRata ||
         ManualAdjustmentArDTO.APStrategyAdjustment == BundleManager.Schemas.Core.Content.APStrategy.AR) &&
        ManualAdjustmentArDTO.APStrategyType == APStrategyType.AllCharges)
    {
        ManualAdjustmentArDTO.APStrategyAdjustment = BundleManager.Schemas.Core.Content.APStrategy.AP;
        ConfirmMessage = $"Adjustment ... Are you sure you want to proceed?";
    }
    else if (ManualAdjustmentArDTO.Amount != BundleUIResults.Bundle.Amount &&
             ManualAdjustmentArDTO.APStrategyAdjustment == BundleManager.Schemas.Core.Content.APStrategy.AP &&
             ManualAdjustmentArDTO.APStrategyType == APStrategyType.AllCharges)
    {
        ManualAdjustmentArDTO.APStrategyAdjustment = BundleManager.Schemas.Core.Content.APStrategy.ProRata;
        ConfirmMessage = $"Adjustment ... Are you sure you want to proceed?";
    }

    IsDialogBoxVisible = true;
}

Problem

• When debugging step by step, it works fine: the AP Strategy dialog closes, and then the confirmation dialog opens.

• But when running normally (without debugger), both IsApStrategyValidationVisible is false and IsDialogBoxVisible is true at the same time. This causes the confirmation dialog not to show properly.

It looks like Blazor/Telerik is not processing the closing of the first dialog before the second is opened.

Question

How can I reliably close one TelerikDialog and then open another in Blazor, without them conflicting?
Is there a recommended pattern (maybe using a single state/enum) for handling multiple dialogs?

Hello,

I have integrated a TelerikDialog onto custom component, unfortulatla it seems to be not working despite it has been correcty initilialized.

Is there a way to working like that ?

Thks,

When I call "Dialogs.AlertAsync", I get null reference error. Any reason why?  The whole page is under TelerikRootComponent.

<TelerikGrid Data="@availableSchedules" class="myTelerik-grid" SelectionMode="GridSelectionMode.Multiple"
             SelectedItems="@selectedSchedules"
             SelectedItemsChanged="@((IEnumerable<BTWInstructorAvailability> newSelected) => OnRowSelect(newSelected))"
             ScrollMode="GridScrollMode.Scrollable" Height="300px">
    <GridColumns>
        <GridCheckboxColumn CheckBoxOnlySelection="true" SelectAll="false" />
        <GridColumn Field="InstructorName" Title="Instructor Name" />
        <GridColumn Field="StartDate" DisplayFormat="{0:MM/dd/yyyy}" Title="Start Date" />
        <GridColumn Field="EndDate" DisplayFormat="{0:MM/dd/yyyy}" Title="End Date" />
        <GridColumn Field="Languages" Title="Languages" />
    </GridColumns>
</TelerikGrid>

protected async Task OnRowSelect(IEnumerable<BTWInstructorAvailability> newSelected)
{
    // Enforce max selection of 3
    if (newSelected.Count() > 3)
    {
        await Dialogs.AlertAsync("Maximum of 3 lessons can be selected.");
        return; 
    }

    selectedSchedules = newSelected;
}

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.

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?