Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 16 Jan 2024 14:54 by Dale
Jonathan
Created on: 24 Oct 2022 15:53
Category: UI for Blazor
Type: Feature Request
6
Create a Dialog Service that can serve up Blazor components in modal window

One really nice feature MudBlazor UI has is the Dialog component. You can pass a component to the Dialog Service and it will display it in a modal dialog.

Existing Example

An example of this would be:

             var orderParams = new DialogParameters();
                orderParams.Add("SelectedOrderHeader", Item);
                orderParams.Add("EditMode", "Add");
                orderParams.Add("SelectedOrderDetail", new OMSOrderDetail());
          
                DialogService.Show<OrdersDetailForm>("Click on orders grid to continue", orderParams);

 

<OrderDetailsForm> is a custom Blazor component.

Does the Telerik Blazor dev team have any plans for implementing something like this?

          
8 comments
Dale
Posted on: 16 Jan 2024 14:54
This would be an extremely nice to have feature. I've used this future in MudBlazor when I was testing it out. It makes dialogs you build more reusable. Obviously, the ability to capture the results of the dialog should also be included.
Vincent
Posted on: 16 Jan 2024 13:37

Please allow me to propose a similar approach with what Blazored Modal propose:
Create a component with any razor + code and then run it using the Modal.Showmodal<Component>(parameters list....);

I already using that in my current project, and he is working fine with lots of Telerik controls but not with per ex. DateTimePicker.

I would love Telerik to provide a similar Modal Controls in a near future.

Thanks

Jonathan
Posted on: 21 Oct 2023 14:12

Now your direct competitor Radzen offers this functionality: https://blazor.radzen.com/dialog

 

MudBlazor is free and offers it.

 

I think Progress/Telerik needs to invest more in their products instead of their sales department. I get an email a week about renewing my license yet I can't get features implemented from their dev team.

 

Please review this request again. It's a worth while feature.

ADMIN
Nadezhda Tacheva
Posted on: 21 Sep 2023 08:13

Hi Jonathan,

I am stepping into the discussion to provide further assistance while my colleague, Svetoslav, is out of office.

I completely agree with you that the more common use case will be to provide a component to the dialog service, rather than plain text. This is indeed achievable. Let me provide some more clarification on the information my colleague shared in the previous post. See my comments on the relevant points as follows:

Clarification for Window and Dialog

The WindowAsAService sample app shows how you can use the TelerikWindow component as a service in your application. Thus, you can inject it in the desired pages and reuse it.

While this sample targets the Window component, you can still use it as a base and utilize the very same approach for the Dialog component as the two components are pretty similar. Replicating this configuration with the Dialog component will allow you to use it as a service.

===

Dialog content type

In terms of the Dialog content, please take a moment to revise this service: https://github.com/telerik/blazor-ui/blob/master/window/WindowAsAService/Services/WindowService.cs.

The instances here are indeed declared to accept string content. However, you can change that so the code meets your application requirements.

Instead of a string, the WindowInstance can accept a RenderFragment. This will allow you to pass the desired component when you are invoking the dialog service.

===

I hope this provides more clarity on the matter.

Take your time to revise the suggested approach and try utilizing it for the Dialog component. Please let us know if you are facing any difficulties in the meantime. If so, please share a runnable sample demonstrating your current progress, so we can revise it and see what might be missing.

Regards,
Nadezhda Tacheva
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Jonathan
Posted on: 14 Sep 2023 12:41

The issue lies in the fact, I don't want to pass simple/arbitrary HTML as a fragment. I want to pass an entire razor component. What if I have a very complex UI in a razor component including forms, date pickers, auto completes fields with related methods/events. I can't pass that as interpolated HTML.

Say I had a component named: EditFormModal.razor and display it dynamically, whenever I wish. 'On the fly' like so 

Example:

<TelerikButton OnClick="@DisplayModalAsync">Click me to edit item</TelerikButton>

public partial class ParentComponent:

{

public async Task DisplayModalAsync()

{

     await DialogService.ShowAsync<EditFormModel>();

}

}

I don't have to worry about string data. All my UI and functionality is encapsulated within the EditFormModal razor file. That's the value in what I'm looking for. These are not simple windows with just some text. They're full featured create, read & update modal forms. Also, I want to be able to call them whenever I want. I don't want to have to embed them into a parent component.

I hope this makes more sense.

ADMIN
Svetoslav Dimitrov
Posted on: 14 Sep 2023 07:41

Hello Jonathan,

I agree that the Telerik Dialog component and the Window as a Service demo application are not equivalent in functionality. However, the Window as a Service project showcases how to achieve behavior similar to the one in MudBlazor. You can extend the code shown in the demo application to exactly match the needs of your application - for example, the Window content local variable can be a RenderFragment and you can pass arbitrary HTML content to the dynamic window instance. 

That being said, I might be missing something as I am not an expert in MudBlazor, can you outline what functionality is lacking in the Window as a Service application when comparing against MudBlazor? 

Regards,
Svetoslav Dimitrov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Jonathan
Posted on: 07 Sep 2023 16:00

I have to say the TelerikDialog or the Window as a Service are not equivalent in functionality.

The DialogService implementation shown above allows you to reuse fully functional existing razor components over and over again throughout the application.

If you create your own TelerikWindow components with various functionality, you can't simply call the component on the fly. Instead, you need to embed the component on the razor page, then display it dynamically based on a @visible(bool) variable. 

In very complex UI's, it's beneficial to be able to pull up a component dynamically like so:

  DialogService.Show<OrdersDetailForm>("Click on orders grid to continue", orderParams);

I hope Telerik considers releasing this as a feature in the future. The fact that MudBlazor has this out of the box for completely free says quite a lot. 

Currently I have to co-mingle MudBlazor and TelerikUI which is not ideal.

ADMIN
Svetoslav Dimitrov
Posted on: 31 Oct 2022 09:34

Hello Jonathan,

You can use the TelerikDialog component. This component will allow you to render any arbitrary HTML in its content. Can you let me know if this component lacks something for your scenario? Additionally, you can see the Window as a Service sample application. 

That being said, I am marking this request as Completed.

Regards,
Svetoslav Dimitrov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Create an account Log In
View
Type
Status
Category