Radzen Dialog Service unwanted Render Cycles during dragging. #1051

New Issue

claunia · 2026-01-29T17:48:21Z

claunia commented

2026-01-29 17:48:21 +00:00

Originally created by @b-giavotto on GitHub (Dec 7, 2023).

A radzen Dialog with both Draggable & Resizable enabled fires a lor of ParameterSet events while dragging, and potentially kick a lor of render cycles.
this can cause performance issues on Blazor Server apps.
Please note that there is no dummy render cycles while resizing instead of dragging the contents.

the render cycle should be fired only on Drag End event.

Steps to reproduce the behaviour:

Create a modal Dialog Content as a Blazor Component, the component should look like this:

@System.DateTime.Now.ToString("hh:mm:ss.fff")

@code {

[Parameter]
public int Dummy {get; set;}

}

Create a simple app, opening a Dialog using the OpenAsync method overload like this below:

var result = await _dialogSvc.OpenAsync(title, (dialogService) =>
{

    RenderFragment fragment = (builder) => 
    {
        builder.OpenComponent(0, typeOf(<the component created above in step 1>);
        builder.AddAttribute(1, "Dummy", 0); 
        builder.CloseComponent();
    };
    return fragment;
}, new Radzen.DialogOptions() { Draggable = true, Resizable = true  });

Launch the App, Open the Dialog and drag the dialog itself. You will notice that the time continues to change while dragging.

Expected behaviour:
the time change only after the Drag Operation ends.

Originally created by @b-giavotto on GitHub (Dec 7, 2023). A radzen Dialog with both Draggable & Resizable enabled fires a lor of ParameterSet events while dragging, and potentially kick a lor of render cycles. this can cause performance issues on Blazor Server apps. Please note that there is no dummy render cycles while resizing instead of dragging the contents. the render cycle should be fired only on Drag End event. Steps to reproduce the behaviour: 1) Create a modal Dialog Content as a Blazor Component, the component should look like this: <h3>@System.DateTime.Now.ToString("hh:mm:ss.fff")</h3> @code { [Parameter] public int Dummy {get; set;} } 2) Create a simple app, opening a Dialog using the OpenAsync method overload like this below: var result = await _dialogSvc.OpenAsync(title, (dialogService) => { RenderFragment fragment = (builder) => { builder.OpenComponent(0, typeOf(<the component created above in step 1>); builder.AddAttribute(1, "Dummy", 0); builder.CloseComponent(); }; return fragment; }, new Radzen.DialogOptions() { Draggable = true, Resizable = true }); 3) Launch the App, Open the Dialog and drag the dialog itself. You will notice that the time continues to change while dragging. Expected behaviour: the time change only after the Drag Operation ends.

claunia closed this issue

2026-01-29 17:48:21 +00:00

claunia commented

2026-01-29 17:48:21 +00:00

@enchev commented on GitHub (Dec 7, 2023):

Hey @b-giavotto,

Of course it will cause render cycles since this is how Blazor component works. The dialog will raise event when dragged and/or resized which will cause change of the state - if it was plain JavaScript implementation this will not happen.

@enchev commented on GitHub (Dec 7, 2023): Hey @b-giavotto, Of course it will cause render cycles since this is how Blazor component works. The dialog will raise event when dragged and/or resized which will cause change of the state - if it was plain JavaScript implementation this will not happen.

claunia commented

2026-01-29 17:48:21 +00:00

@b-giavotto commented on GitHub (Dec 7, 2023):

I know this. the issue is not the dummy rendering cycles, it is how to stop those rendering cycles when unwanted like during drag operations. Please take a look on the source code in DialogContainer.razor:

As you see, on the "OnResize" method, the component temporarily stops the rendering (shouldRender = false) then restore it.
The same should be done on the OnDrag event.

`void OnDrag(DraggableEventArgs args)
{
left = string.Format(System.Globalization.CultureInfo.InvariantCulture, "left: {0}px;", args.Rect.Left + (args.ClientX - clientX));
top = string.Format(System.Globalization.CultureInfo.InvariantCulture, "top: {0}px;", args.Rect.Top + (args.ClientY - clientY));
}
///

/// Called when resized.
///

/// The width.
/// The height.
[JSInvokable("RadzenDialog.OnResize")]
public void OnResize(double w, double h)
{
shouldRender = false;

    width = $"width: {w}px;";
    height = $"height: {h}px;";

    shouldRender = true;
}

bool shouldRender = true;
protected override bool ShouldRender()
{
    return shouldRender;
}`

@b-giavotto commented on GitHub (Dec 7, 2023): I know this. the issue is *not* the dummy rendering cycles, it is how to stop those rendering cycles when unwanted like during drag operations. Please take a look on the source code in DialogContainer.razor: As you see, on the "OnResize" method, the component temporarily stops the rendering (shouldRender = false) then restore it. The same should be done on the OnDrag event. `void OnDrag(DraggableEventArgs args) { left = string.Format(System.Globalization.CultureInfo.InvariantCulture, "left: {0}px;", args.Rect.Left + (args.ClientX - clientX)); top = string.Format(System.Globalization.CultureInfo.InvariantCulture, "top: {0}px;", args.Rect.Top + (args.ClientY - clientY)); } /// <summary> /// Called when resized. /// </summary> /// <param name="w">The width.</param> /// <param name="h">The height.</param> [JSInvokable("RadzenDialog.OnResize")] public void OnResize(double w, double h) { shouldRender = false; width = $"width: {w}px;"; height = $"height: {h}px;"; shouldRender = true; } bool shouldRender = true; protected override bool ShouldRender() { return shouldRender; }`

claunia referenced this issue

2026-01-29 18:19:00 +00:00

[PR #1051] [MERGED] Fix search with quotes in RadzenDataGrid filter #2473

claunia referenced this issue

2026-01-29 18:19:01 +00:00

[PR #1051] Fix search with quotes in RadzenDataGrid filter #2476

Sign in to join this conversation.