<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>
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>
---------
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}.");
}
}
Hello,
Please add support for MarkupString in the predefined awaitable dialogs. This will allow us to add new lines and other simple rich content, without the need to resort to the full-blown Dialog component.
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.
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");
}
}
}
---
There is a bug where DialogFactory is not resetting custom button text. In this example, if you click Show Prompt, the buttons are OK/CANCEL, then click Show Prompt with Title, Default Input Text and Custom Buttons, the buttons show READY/REJECT, clicking Show Prompt a second time will show the button text as READY/REJECT.
The issue can be reproduced when clicking on a button that opens a predefined Dialog, then making some changes on the page and hot reloading. In this scenario, I get the following error:
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'addEventListener') TypeError: Cannot read properties of null (reading 'addEventListener')
Hello I want to close a TelerikDialog using Esc key and this does not work sometimes. Run this REPL snippet please https://blazorrepl.telerik.com/cnYrwUYq54FZ70xP17. Click into dialog title for instance and press Esc key. Nothing happens.
Very thanks.
Miroslav
Pressing Espace in a focused SearchBox throws an "Error: System.ObjectDisposedException: The CancellationTokenSource has been disposed." exception.
<AdminEdit>
A workaround that will solve the issue until the fix is released.
<TelerikDialog @bind-Visible="@Visible"
Title="@Title">
<DialogContent>
<TelerikGrid Data=@GridData Pageable="true" Height="400px" Width="700px">
<GridToolBar>
<span class="k-toolbar-spacer"></span> @* add this spacer to keep the searchbox on the right *@
<div onkeydown="event.stopPropagation()">
<GridSearchBox />
</div>
</GridToolBar>
<GridColumns>
<GridColumn Field="@(nameof(Employee.EmployeeId))" />
<GridColumn Field=@nameof(Employee.Name) />
<GridColumn Field=@nameof(Employee.Team) Title="Team" />
<GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
</GridColumns>
</TelerikGrid>
</DialogContent>
</TelerikDialog>
@code {
private bool Visible { get; set; } = true;
private string Title { get; set; } = "Software Update";
public List<Employee> GridData { get; set; }
protected override void OnInitialized()
{
GridData = new List<Employee>();
var rand = new Random();
for (int i = 0; i < 15; i++)
{
GridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3,
IsOnLeave = i % 2 == 0
});
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public bool IsOnLeave { get; set; }
}
}
</AdminEdit>