Completed
Last Updated: 02 May 2022 12:28 by ADMIN
Release 3.3.0

ADMIN EDIT

You can use the code snippet below to test this behavior in your app. At the end of the post you will find two sample apps attached that use that same code - one is OK, the other exhibits the issue. The difference in them is the layout. The one that works OK has the old MS template from over a year ago where there is an <app> element above the root of the blazor components, and that element has display: flex. The problematic app has the newer template without such a parent element - the parent element is not the <body> and it does not have display:flex. You can add in the following rule to it to see it will fix the dialog overlay error (but it can damage the layout of the app).

sample rule to fix the issue in the problematic app

    body {
        display:flex;
    }

sample code to test the behavior

<TelerikWindow Modal="true" @bind-Visible="@isModalVisible">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        I am modal so the page behind me is not available to the user.
        <br />
        <TelerikButton OnClick="@( _ => isSecondModalVisible = true )">Open the SECOND window</TelerikButton>
        <TelerikButton OnClick="@ShowConfirmWithTitle">Show Confirm</TelerikButton>
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>

<TelerikWindow Modal="true" @bind-Visible="@isSecondModalVisible">
    <WindowTitle>
        <strong>The SECOND</strong>
    </WindowTitle>
    <WindowContent>
        Second modal!
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>

<TelerikButton OnClick="@( _ => isModalVisible = true )">Open the window</TelerikButton>

@code{
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }
    bool isModalVisible { get; set; }
    bool isSecondModalVisible { get; set; }
    async Task ShowConfirmWithTitle()
    {
        bool isConfirmed = await Dialogs.ConfirmAsync("Are you sure?", "Confirmation!");

        Console.WriteLine($"The user is sure: {isConfirmed}.");
    }
}

Completed
Last Updated: 14 Mar 2022 09:39 by ADMIN
Release 3.2.0
Created by: Scott
Comments: 0
Category: Dialog
Type: Bug Report
0

https://blazorrepl.telerik.com/cGEHOxYU12TavfAP41

Dialog component does not recalculate its z-index based on the existing window components. Thus, it is displayed behind the window.

Planned
Last Updated: 15 Dec 2021 13:59 by ADMIN

Hello,

I am using DialogFactory in a Blazor server app with PreRendering disabled.

It appears to cause more than expected OnParametersSet calls - its firing 2-6 times per page opening. Without DialogFactory it fires only once.

Completed
Last Updated: 02 Dec 2021 15:09 by ADMIN
Release 2.30.0

 <AdminEdit>

This feature request would be used to monitor the requests for a full-fledged Dialog component. It will be defined in the Markup and will provide options to customize the Header and Content and will expose Action buttons.

</AdminEdit>

Unplanned
Last Updated: 17 Nov 2021 17:18 by Chris
Created by: Chris
Comments: 2
Category: Dialog
Type: Feature Request
4
I would like to easily mock the DialogFactory.
Duplicated
Last Updated: 23 Oct 2021 12:54 by ADMIN
Created by: Stewart
Comments: 1
Category: Dialog
Type: Feature Request
0
would be nice to be able to require input from the user if they are going to press OK in the prompt dialog, currently you don't require any input so the result is the same as cancel
Unplanned
Last Updated: 29 Sep 2021 13:24 by ADMIN
Created by: Doug
Comments: 0
Category: Dialog
Type: Feature Request
1
It would be great if we had the ability to add an icon to a dialog, similar to the attached screenshot of the dialog I wrote using a Telerik window.
Unplanned
Last Updated: 21 Sep 2021 13:41 by ADMIN
Created by: Bob
Comments: 0
Category: Dialog
Type: Bug Report
5
I would like to use the Prompt Dialog for an "optional" response.  

Currently I cannot tell the difference between the User clicking Cancel, and the user clicking OK, but not entering anything in the Text box?
Unplanned
Last Updated: 29 Aug 2021 10:01 by ADMIN
Created by: Aleksandr
Comments: 0
Category: Dialog
Type: Feature Request
6

I want to fill the textbox of the prompt with predefined text, can we have that same behavior like in kendo https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/prompt?

 

---------

ADMIN EDIT

Here is a workaround

 

@inject IJSRuntime _js

<TelerikButton OnClick="@PromptWithText">Workaround</TelerikButton>

@code{
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }

    async Task PromptWithText()
    {
        // the workaround - invoke a script that will set the input value with a delay
        await _js.InvokeVoidAsync("setPromptDefaultText", "predefined prompt value");

        // do the prompts as usual
        string prompt = await Dialogs.PromptAsync("Enter something");
        Console.WriteLine(prompt);
    }
}

@* move this script to a proper location, this is a hack 
    to put in the blazor component so the workaround is easy to copy and run *@
<script suppress-error="BL9992">
    function setPromptDefaultText(defText) {
        setTimeout(function(){
            var promptInput = document.querySelector(".k-prompt-container .k-textbox .k-input-inner");
            if(promptInput) {
                promptInput.value = defText;
                promptInput.dispatchEvent(new Event('input', {bubbles: true} ));
            }
        }, 50); // a timeout so the prompt can render first
    }
</script>

 

---------

Duplicated
Last Updated: 23 Aug 2021 14:29 by ADMIN

I have a Modal Window showing and then show a Predefined Dialog alert.  You can click on the modal window and the Alert dialog goes behind and you have to close the modal, then close the alert dialog.

It would be nice if the the predefined dialogs were always modal on top of all windows.

Unplanned
Last Updated: 20 Aug 2021 08:13 by ADMIN
Created by: Dan
Comments: 0
Category: Dialog
Type: Feature Request
6
Pressing the Enter key should trigger the Ok button in the Prompt Dialog
Unplanned
Last Updated: 09 Jul 2021 10:00 by ADMIN
Created by: Raventhorn
Comments: 1
Category: Dialog
Type: Feature Request
13
Would be great to have the ability to customize the text of the Dialog Factory buttons, especially for Confirmation. We could use a Custom window but all we need to do is change the buttons and the Dialogs feature is perfect.
Unplanned
Last Updated: 21 Jun 2021 06:59 by ADMIN
Created by: Guy
Comments: 0
Category: Dialog
Type: Feature Request
1
I would like to use a similar parameter to the RestrictionZoneID in AJAX - https://demos.telerik.com/aspnet-ajax/window/examples/restrictionzone/defaultcs.aspx
Completed
Last Updated: 18 May 2021 06:07 by ADMIN
It I possible to customize the Dialog component (e.g Yes/No instead of OK/Cancel)?
Unplanned
Last Updated: 07 May 2021 00:29 by Baires
Created by: Yuri
Comments: 1
Category: Dialog
Type: Feature Request
5

Can I define the Cancel home button by default? When deleting a line I use Confirm Dialogs, I want the default (active) button to be Cancel (not Ok)

---

ADMIN EDIT

Here is a solution you can use:

@inject IJSRuntime _js

@* move this script to a proper place in your project and remove the 
    suppress-error hack that lets it stay in the component - it is here for brevity only *@
<script suppress-error="BL9992">
    function focusCancelDialogButton() {
        setTimeout(function() {
            var cancelButtons = document.querySelectorAll(".k-dialog .k-dialog-buttongroup .k-button");
            if(cancelButtons && cancelButtons.length > 1) {
                cancelButtons[1].focus();
            }
        }, 100);
    }
</script>

<TelerikButton OnClick="@ShowConfirm">Show Confirm</TelerikButton>

@code {
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }

    public async Task ShowConfirm()
    {
        await _js.InvokeVoidAsync("focusCancelDialogButton");
        bool isConfirmed = await Dialogs.ConfirmAsync("Are you sure?");

        if (isConfirmed)
        {
            Console.WriteLine("The user is sure, continue.");
        }
        else
        {
            Console.WriteLine("The user changed their mind");
        }
    }
}

---