Unplanned
Last Updated: 07 May 2021 00:29 by Baires
Created by: Yuri
Comments: 1
Category: Dialog
Type: Feature Request
2

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");
        }
    }
}

---

Unplanned
Last Updated: 13 Apr 2021 07:20 by ADMIN

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: 12 Apr 2021 16:49 by ADMIN
It I possible to customize the Dialog component (e.g Yes/No instead of OK/Cancel)?