Dynamically toggle resize/reorder

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Duplicated

Last Updated: 13 Mar 2025 04:45 by Eduardo

Brian

Created on: 23 Sep 2020 13:08

Category: TileLayout

Type: Feature Request

Dynamically toggle resize/reorder

I want to change the Reordable and Resizable parameters at runtime. However, when updating the reorder/resize parameters, the component is re-rendered, enabling the cursors for resize and drag/drop but no functionality.

Duplicated

This item is a duplicate of an already existing item. You can find the original item here:

TileLayout does not react to changes in the Resizable and Reorderable parameters as well as the TileLayoutItems parameters

2 comments

Eduardo

Posted on: 13 Mar 2025 04:45

Hi Telerik team,

I’ve run into this issue with the TelerikTileLayout component where toggling Resizable or Reorderable dynamically doesn’t fully enable the functionality. The current workaround—hiding and showing the component to force reinstantiation—works but is inefficient, especially with complex tile layouts, as it recreates everything from scratch.

After digging into TelerikTileLayout component, I found the problem: the _resizableChanged and _reorderableChanged flags can reset prematurely if SetParametersAsync runs multiple times before OnAfterRenderAsync, skipping the "setOptions" JavaScript call.

Here’s a suggested fix for the component:

Proposed Changes

In SetParametersAsync:

_resizableChanged |= parameters.HasParameterChanged("Resizable", Resizable);
_reorderableChanged |= parameters.HasParameterChanged("Reorderable", Reorderable);

In OnAfterRenderAsync:

if (_resizableChanged || _reorderableChanged)
{
    await InvokeVoidAsync("setOptions", base.DataId, GetTileLayoutWidgetOptions());
    _resizableChanged = _reorderableChanged = false;
}

Why This Works

The |= operator ensures the flags stay true once a change is detected, even across multiple SetParametersAsync calls.
OnAfterRenderAsync applies the updates and resets the flags, syncing properly with the JavaScript layer.

This avoids reinstantiation, boosts performance, and makes dynamic toggling reliable. Happy to elaborate if needed—let me know!

ADMIN

Marin Bratanov

Posted on: 25 Sep 2020 13:11

Here is a workaround that hides the component so it can re-initialize from scratch with the new parameter values

<TelerikButton OnClick="@ToggleResizing">Toggle Resizable</TelerikButton>
<TelerikButton OnClick="@ToggleReorder">Toggle Reordable</TelerikButton>

@if (isVisible)
{
    <TelerikTileLayout Columns="3"
                       Resizable="@Resizable"
                       Reorderable="@Reordable"
                       RowHeight="150px">
        <TileLayoutItems>
            <TileLayoutItem HeaderText="Panel 1">
                <Content>Regular sized first panel.</Content>
            </TileLayoutItem>
            <TileLayoutItem HeaderText="Panel 2">
                <Content>You can put components in the tiles too.</Content>
            </TileLayoutItem>
            <TileLayoutItem HeaderText="Panel 3" RowSpan="3">
                <Content>This tile is three rows tall.</Content>
            </TileLayoutItem>
            <TileLayoutItem HeaderText="Panel 4" RowSpan="2" ColSpan="2">
                <Content>This tile is two rows tall and two columns wide</Content>
            </TileLayoutItem>
        </TileLayoutItems>
    </TelerikTileLayout>
}
@code{
    bool Resizable { get; set; }
    bool Reordable { get; set; }
    bool isVisible { get; set; } = true;

    async Task ToggleResizing()
    {
        isVisible = false;
        await Task.Delay(30);

        Resizable = !Resizable;
        isVisible = true;
    }

    async Task ToggleReorder()
    {
        isVisible = false;
        await Task.Delay(30);

        Reordable = !Reordable;
        isVisible = true;
    }
}

Regards,
Marin Bratanov
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/.